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因特网 上 的 兼职 行业 中 ， 因 特 网 网 站 技术 的 开发 与 应 用 具有 最 大 的 需 
求 。 从 事 网 络 兼职 工作 ， 做 一 个 出 色 的 网 站 设计 师 是 一 个 不 错 的 选择 。 本 书 
由 经 验 丰 是 的 资深 网 页 设计 师 编 著 ， 通 过 多 个 实际 的 经 典 网 站 架 例 ， 由 浅 入 
深 地 介绍 了 专业 网 站 制作 软件 的 综合 运用 ， 并 融合 了 设计 师 的 设计 构思 和 经 
验 技巧 。 全 书 共 分 为 8 章 ， 包 括 网 站 的 策划 、 毅 态 网 页 制作 、 各 种 动态 网 页 
制作 、 网 络 程序 的 编号、 网 站 域名 及 空间 的 建立 和 管理 等 内 容 。 

本 书 定位 于 网 站 设计 和 初学 者 ， 适 合 网 络 莱 职 网 站 设计 师 学 习 使 用 。 书 中 
内 容 以 一 个 网 站 设计 初学 者 的 学 习 过 程 来 安排 各 个 知识 点 ， 并 融入 大 量 操 作 
搁 巧 ， 让 读者 能 学 到 最 实用 的 知识 ， 迅 速 掌 握 Dreamweaver、Flash、Photoshop 
以 及 ASP 的 使 用 方法 。 本 书 特别 为 那些 希望 掌握 网 站 建设 一 技 之 长 的 工作 人 
员 学 习 掌 握 技能 使 用 ， 主 要 面 对 厂 大 Dreamweaver 的 初 、 中 级 用 户 。 
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为 了 让 读者 能 够 迅速 掌握 相关 应 用 软件 的 使 用 方法 ， 实 现 网 络 兼职 进行 网 赚 的 目标 ， 特 
为 广大 读者 推出 了 这 人 套 《 网 络 启 生 手 记 》 从 书 。 本 从 书 针 对 热门 实用 行业 ， 选 择 简 单 易学 的 
软件 ， 按 从 入 门 到 精通 的 进程 ， 精 心 选择 实例 进行 编写 ， 其 宗 则 就 是 让 读者 全 方位 掌握 相关 
软件 的 应 用 ， 为 广大 读者 提供 掌握 计算 机 应 用 技能 的 捷径 。 丛 书 的 版 式 新 统 ， 知 识 与 实例 相 
结合 ， 为 读者 三 省 了 学 习 的 时 间 。 

本 和 套 从 书 的 特点 总 结 如 下 .: 

融会 行业 知识 ， 
内 容 丰 富 实 用 ; 
精 选 商业 实例 ， 
提高 动手 技能 。 

本 书 主要 涉及 的 软件 和 近 术 有 : 

@ Dreamweaver CS6 一 一 专业 的 网 页 排版 工具 。 

@ Flash CS5 一 一 专业 的 网 页 动 男 工具 。 

@ Photoshop CS5 -一 一 优秀 的 网 页 图 像 处 理 软件 。 

@ HTML、ASP、 数 据 库 等 网 站 开发 扩 术 。 

本 书 所 选 实 例 均 产 自 行业 的 实际 应 用 ， 制 作 过 程 突出 了 以 理论 知识 为 基础 ， 创 意 与 实用 
性 并 行 ， 是 网 站 建设 、 设 计 、 开 发 报 术 人 员 的 最 佳 学 习 参 考 书 ， 较 详细 而 系统 地 介绍 了 网 站 
策划 、 网 站 开发 技术 、 网 页 制作 工具 和 网 站 制作 实例 。 本 书 共 分 为 8 章 。 

第 1 章 详细 介绍 了 网 站 建设 的 基础 知识 。 主 要 介绍 了 Dreamweaver 在 网 站 设计 中 的 重要 
地 位 以 及 使 用 Dreamweaver 进行 建站 的 行业 知识 ， 并 重点 介绍 了 如 何在 网 上 寻找 该 类 兼职 的 
方法 和 技巧 。 

第 2 章 主 要 介绍 了 网 站 网 页 的 搭建 基础 知识 。 主 要 介绍 如 何 使 用 Photoshop 切割 网 页 图 
片 ， 然 后 用 Dreamweaver CS6 搭建 首页 的 效果 ， 完 成 静态 部 分 的 设计 工作 ， 同 时 掌握 一 些 网 
站 建设 的 基础 操作 ， 让 兼职 者 掌握 网 页 设计 的 第 一 步 。 

第 3 章 比较 系统 地 介绍 了 个 人 网 站 的 建设 全 过 程 。 从 个 人 宣传 网 站 建设 前 期 准备 工作 入 
手 ， 在 开始 制作 时 需要 在 本 地 建立 网 站 服务 器 ， 然 后 用 Photoshop 设计 网 页 效果 并 切割 成 图 
片 备 用 ， 最 后 用 Dreamweaver CS6 进行 排版 。 其 中 ， 岩 入 Flash 动画 及 加 入 动态 效果 是 网 站 
建设 的 扩 术 难点 ， 读 者 可 以 多 人 参考 其 他 相关 类 书籍 ， 制 作出 更 精美 的 动 国 效 果 。 

第 4 草 介 绍 了 动态 网 站 建设 的 基础 部 分 即 会 员 管 理 系统 的 开发 与 制作 ， 通 过 实例 介绍 ， 
读者 主要 掌握 如 何 用 Access 创建 数据 表 ， 在 操作 系统 中 建立 数据 产 ， 用 Dreamweaver CS6 
创建 数据 库 连 接 ， 建 立 记录 集 ， 查 询 记 录 集 等 操作 ， 掌 握 带 会 员 管 理 系 统 型 网 站 的 建设 开 
发 扩 巧 。 

第 5 章 通 过 实例 的 设计 与 制作 ， 读 者 主要 掌握 网 站 留言 板 的 开发 与 制作 ， 并 且 掌 握 
Flash 菜单 的 编程 设计 。 在 留言 板 的 设计 中 主要 用 到 了 创建 存储 讨论 区 有 关 信 息 的 数据 库 、 
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设 定 DSN、 定 义 站 点 、 创 建 数据 库 连 接 、 制 作 让 浏览 者 添加 内 容 的 网 页 、 建 立 记录 集 、 显 示 
多 条 记录 、 隐 藏 导航 条 链接 、 创 建 计 数 器 、 删 除 记 录 等 知识 。 

第 6 章 介 绍 了 教育 类 网 站 的 建设 方法 ， 这 对 于 复杂 的 ASP 应 用 系统 设计 和 制作 是 非常 有 用 
的 。 通 过 对 教育 类 网 站 的 整体 功能 分 析 与 设计 ， 读 者 可 以 掌握 这 类 网 站 整体 规划 相关 知识 。 
其 中 重点 分 析 介 绍 了 自 教 新 闻 模 块 与 学 员 注 册 模 块 。 读 者 也 可 以 举一反三 ， 网 站 建设 中 的 
“最 新 动态 ”"、“ 求 学 指南 ”等 动态 滚动 区 域 可 以 按照 新 闻 系 统 来 设计 实现 。 

第 7 章 是 针对 中 小 型 企业 实现 网 上 商务 的 需求 ， 介 绍 了 电子 商务 网 站 建设 相关 内 容 ， 不 
但 开发 成 本 比较 低 ， 性 能 也 很 强大 ， 其 强大 的 后 合 管理 系统 ， 令 拥有 者 可 以 轻松 管理 好 自己 
的 网 站 ， 并 强化 了 网 上 购物 功能 。 其 目的 是 通过 购物 车 程序 ， 让 读者 了 解 如 何 利 用 ASP 实现 
一 个 购物 车 的 基本 思路 。 主 要 通过 ASP 内 建 对 象 Request、Response、Session、Application 
的 应 用 ， 实 现 购物 的 采购 统计 结算 功能 ， 其 中 主要 是 通过 Session 的 应 用 来 实现 购物 车 的 暂 
时 存储 功能 。 

第 8 章 经 过 一 系列 的 规划 、 布 局 、 设 计 、 制 作 和 和 整合， 利用 Flash CS5 完成 了 多 巡 体 网 
站 的 核心 部 分 技术 开发 建设 。 在 网 站 建设 过 程 中 ， 综 合 利 用 了 Flash 的 各 项 功能 和 技术 ， 特 
别 是 许多 Flash CS5 所 特有 的 、 不 同 于 以 往 旧 版 本 的 新 特性 ， 动 态 地 整合 了 各 种 媒体 资源 ， 
构建 出 了 一 个 完整 而 美观 的 、 功 能 齐全 的 Flash 多 媒体 播放 器 。 

本 书 由 环 博文 化 的 技术 团队 编写 而 成 ， 其 中 陈 益 材 、 朱 明 岭 负责 主编 策划 工作 ， 男 外 
王 亚 非 、 张 勇 、 朱 文 军 、 叶 芳 、 孙 楠 、 隋 丽 、 刘 遍 萤 、 高 雨 、 张 学 军 参 与 了 编写 工作 。 由 
于 作者 水 平 有 限 ， 加 之 创作 时 间 仓 促 ， 本 书 疏 漏 之 处 在 所 难免 ， 欢迎 各 位 读者 与 专家 批评 
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第 2 章 网 页 的 美工 设计 和 基础 知识 


2.1 网 页 设计 知识 
2.1.1 首页 的 功能 模块 
2.1.2 ”规划 首页 的 版 面 
2.1.3 ”Banner 创作 技巧 
2.2 网 页 定位 元 素 表格 
2.2.1 表格 的 基础 知识 
2.2.2 在 网 页 中 编辑 表格 
2.2.3 ”表格 属性 设置 
2.2.4 调整 表格 的 大 小 
2.2.5 添加 /删除 行 或 列 
2.2.6 合并 及 拆 分 单元 格 
2.3 网 页 的 超 链接 
2.3.1 ” 超 链 接 基 本 概念 
2.3.2 ”链接 的 路 径 
2.3.3 ”链接 的 颜色 
2.3.4 ”使 用 文件 选择 对 话 框 
2.4 ”网 站 建设 常用 操作 
2.4.1 文本 超 链接 
2.4.2 ”链接 到 命名 销 
2.4.3 ”建立 电子 邮件 链接 
2.4.4 ”建立 无 地 址 链接 
2.4.5 ”建立 脚本 链接 
2.4.6 ”图像 映 射 
2.5 ”综合 实例 : 陆 城 社区 
2.5.1 网 页 图 片 的 切片 与 保存 
2.5.2 ”本 地 站 点 网 站 文件 夹 规划 
2.5.3 网 页 的 搭建 
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第 1 章 Dreamweaver 网 站 建设 基础 和 网 络 商 机 


1.1 网 站 建设 网 赚 入 门 基础 
1.1.1 网 站 建设 兼职 工作 细 分 
1.1.2 ”寻找 网 站 建设 网 络 商 机 
1.1.3 ”进行 网 站 建设 的 步骤 

1.2 ”从 规划 设计 开始 兼职 
1.2.1 网 站 的 栏目 设计 
1.2.2 ”定位 网 站 VI 形象 
1.2.3 网 站 的 宣传 标语 
1.2.4 ”确定 网 站 框 染 
1.2.5 资料 收集 

1.3 网 站 制作 注意 事项 
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第 4 章 会 员 系 统 型 网 站 建设 


4.1 市 会 员 系 统 网 站 设计 


4.1.1 
4.1.2 页面 设计 规划 


网 站 功能 结构 分 析 


4.2 用户 系统 数据 库 设计 


4.2.1 ”用户 数据 库 设计 
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第 3 章 


3.1.1 建站 前 的 准备 工作 
3.1.2 个 人 网 站 设计 要 求 


3.1.3 ”确认 网 站 的 主题 和 内 容 


3.2 ”搭建 网 站 服务 器 平台 
3.2.1 IIS 简介 

3.2.2 ”安装 IS 

3.2.3 配置 Web 服务 器 
3.2.4 设置 站 点 属性 


3.3 ”用 Photoshop 完成 网 页 设计 


3.3.1 首页 布局 设计 

3.3.2 ”网 页 大 小 的 设置 
3.3.3 页面 内 容 模块 的 搭建 
3.4 主要 页 面 的 制作 
3.4.1 主页 的 页 面 设计 
3.4.2 ”相片 网 页 制作 

3.5 ”加 入 动态 效果 

3.5.1 常用 网 页 代码 介绍 
3.5.2 ”Marquee 制作 滚动 字 医 
3.5.3 ”加 入 问候 语 

3.5.4 ”状态 栏 动态 效果 
3.6 ”网 站 样式 控制 

3.6.1 CSS 的 功能 

3.6.2” 层 登 样 式 表 的 类 型 
3.6.3 ”改造 网 页 的 文本 样式 
3.7 ” 藤 入 Flash 动画 
3.7.1 Flash 基本 界面 
3.7.2 ”Flash Banner 的 使 用 


3.8 ”网 站 的 上 传 及 配置 
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个 人 宣传 网 站 建设 
3.1 网 站 建设 前 期 准备 工作 





4.2.2 ”创建 数据 库 连 接 
4.3 登录 功能 设计 

4.3.1 制作 登录 页 面 
4.3.2 ”登录 失败 和 成 功 页 面 
4.3.3 ”登录 系统 的 测试 
4.4 会 员 注册 功能 设计 
4.4.1 ”注册 系统 主页 面 
4.4.2 ”注册 成 功 和 失败 
4.4.3 ”注册 系统 的 测试 
4.5 ”会员 资料 修改 功能 设计 
4.5.1 资料 修改 页 面 
4.5.2 ”修改 成 功 页 面 

4.5.3 删除 会 员 功 能 
4.5.4 资料 修改 测试 

4.6 找 回 用 户 注 册 资 料 
4.6.1 但 询 主 要 页 面 
4.6.2 ”完善 合 询 功能 

4.6.3 ”密码 查询 测试 
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第 5 章 宙 留 言 板 系统 网 站 建设 


5.1 网 站 整体 设计 
5.1.1 网 站 功能 结构 分 析 
5.1.2 页面 设 计 规 划 

5.2 ”网 站 数据 库 设 计 
5.2.1 留言 板 数据 库 
$.2.2 ”留言 板 页 面 设计 

5.3 ”设计 登录 页 面 

5.4 功能 页 面 设计 
5.4.1 插入 留言 页 面 
5.4.2 ”罗列 留言 页 面 
5.4.3 ”显示 留言 页 面 

5$.5 网 站 后 台 管 理 功能 设计 
5.5.1 牛 侣 登 孙 页 面 
5.5.2 ”删除 留言 页 面 
5.5.3 ”删除 成 功 页面 

5.6 测试 留言 板 
5.6.1 ”留言 测试 
5.6.2 ”后 台 管 理 测试 
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Dreamweaver 网 站 
建设 基础 和 网 络 两 机 


世界 性 的 经 济 低迷 ， 加 上 通货 膨胀 ， 使 得 我 国 传 
统 行业 ， 尤 其 是 中 小 企业 ， 面临 着 前 所 未 有 的 生存 与 
竞争 压力 ! 基于 因特网 的 电子 商务 平台 是 任何 企业 和 
个 人 打开 市 场 的 一 条 捷径 。 而 网 络 的 友 展 ， 专 业 建 站 
技术 需求 为 众多 县 有 一 技 之 长 的 兼职 人 员 提 供 了 一 个 
不 错 的 机 会 。 作 为 网 赚 的 网 页 设计 师 ， 不 仪 要 掌握 网 
络 搜 索 的 相关 知识 ， 而 且 要 熟悉 Dreamweaver 设计 
的 方法 和 技巧 ， 才 能 有 所 作为 。 本 章 主 要 介绍 
Dreamweaver- 在 网 站 设计 申 的 重要 地 位 以 及 使 用 
Dreamweaver 进行 建站 的 行业 知识 ， 并 重点 介绍 如 
何在 网 上 寻找 该 类 兼职 的 方法 和 技 15。 
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1.1 网 站 建设 网 赚 入 门 基础 


随 看 因特网 的 高 速 发 展 ， 企 业 或 者 个 人 纷纷 在 因特网 上 建立 自己 的 “家 ”， 其 中 有 专业 


写 的 网 站 站 点 ， 有 用 于 交易 的 网 络 平 侣 ， 有 用 于 宣传 用 的 博客 等 。 在 这 种 趋势 下 ， 
“| Dreamweaver 网 站 建设 近 能 也 逐渐 成 为 网 络 兼 职 项 目 中 的 一 打 奇 瑟 ， 逐 步 发 展 和 演变 ， 经 历 
” 了 市 场 的 考验 ， 慢 慢 成 熟 和 稳健 。 要 想 在 网 上 兼职 赚 取 网 站 建设 的 费用 ， 首 先 要 了 解 在 网 上 


寻找 该 类 兼职 的 方法 。 
1.1.1 网 站 建设 兼职 工作 细 分 


读者 首先 要 明确 想 兼职 做 什么 ， 是 想 从 事 网 页 美工 设计 ， 还 是 想 从 事 程 序 开 发 或 者 网 页 
动 国 设 计 。 现 在 就 以 做 网 站 来 况 ， 页 面 美 工 设 计 是 一 个 分 工 ， 页 面 制作 是 一 个 分 工 ， 后 合 程 
序 是 一 个 分 工 ， 网 页 动 田 设计 又 是 一 个 分 工 。 

1. 网 站 域名 和 空间 服务 忌 商 

建立 一 个 网 站 首先 要 有 一 个 自己 的 网 站 地 址 ( 简称 网 址 )， 网 址 是 由 域名 来 决定 的 。 
此 ， 知 想 建 立 网 站 ， 首 移 需 要 注册 或 转 入 一 个 域名 ， 以 便 命 名 要 建立 的 网 站 。 域 名 是 因特网 
上 的 一 个 服务 器 或 一 个 网 络 系统 的 名 了 字 ， 为 了 解决 记忆 IP 地 址 困难 的 问题 ， 就 出 现 了 域 
名 。 域 名 是 独一无二 的 ， 而 且 一 般 都 采取 先 来 先 得 的 申请 方式 。 

在 因特网 上 有 干 百 万 人 台 主 机 ， 为 了 区 分 这 些 主 机 ， 给 每 全 主机 都 分 配 了 一 个 专门 的 地 
址 ， 称 为 IP 地 址 。 通 过 IP 地 址 就 可 以 访问 到 每 一 合 主机 。 

IP 地 址 由 4 部 分 数字 组 成 ， 每 部 分 都 不 大 于 256， 各 部 分 之 间 用 小 数 点 分 开 。 例 如 ， 
www.hbculture.com 就 是 220.113.15.16 的 域名 ， 在 DOS 操作 系统 下 用 Ping www.hbculture. 
com 就 可 以 知道 该 域名 的 IP 地址 ， 如 图 1-1 所 示 。 


sn CTINDOTS systend2\cad. ere 


Hicrosoft Windows XP [版 本 5.1.2686] 
《cy 版 析 所 有 1985-2881 Nicrosoft Corp. 


Gs™“ Documents and Settings “dninistrator?ping ww.hbhculture .com 
Pinging waw.hbculture.com [228.113.15.16] with 32 bytes of data: 
Regquest timed out . 

Regquest timed out. 

Regquest timed out . 


Reguest timed out . 


J hE es Ph he ep sh : 
Packets: Sent = 十。 Received = 因 。 Lost = 4 《108x loss»; 


CDocumnents and Settings “dninistrator»s 





国 图 1-1 Ping 域名 所 指向 的 IP 地 址 


每 个 虚拟 主机 用 户 ， 都 分 配 有 一 个 永久 的 IP 地 址 。 

虽然 可 以 通过 IP 地 址 来 访问 每 一 合 主机 ， 但 是 要 记 住 那么 长 的 数字 串 显 然 非 音 困难， 
为 此 ，Internet 提供 了 域名 (Domain Name)。 

域名 也 由 大 干 部 分 组 成 ， 各 部 分 之 间 用 小 数 挟 分 开 。 例 如 “ 环 博文 化 ”主机 的 域名 就 是 
“hbculture.com”， 显 然 域 名 比 IP 地 址 好 记 多 了 。 

域名 前 加 上 传输 协议 信息 及 主机 类 型 信息 就 构成 了 网 址 (JRLD)， 例 如 “ 环 博文 化 ”的 WWW 
主机 的 URL 就 是 “http://www.hbculture.com”。 

由 于 Internet 最 初 是 在 美国 发 关 的 ， 因 此 最 早 的 域名 并 无 国家 标识 ， 人 们 按 用 途 把 尼 
们 分 为 几 个 大 类 ， 它 们 分 别 以 如 下 几 个 不 同 的 扩展 名 结尾 。 

.COM 用 于 商业 公司 

.Org 用 于 组 织 、 协 会 等 

.net 用 于 网 络 服务 

.edu 用 于 教育 机 构 

.gOV 用 于 政府 部 门 

.Mii] 用 于 军事 领域 

.Ch 中 国志 用 的 顶级 域名 


六 兼职 指导 : 

以 .cn 结尾 的 二 级 域名 通常 简称 为 国内 域名 。 注 册 国 际 域名 没有 条 件 限 制 ， 单 位 和 个 人 
均 可 以 申请 。 注 册 国 内 域名 必须 具备 法 人 资格 ， 申 请 人 需 将 申请 表 加 盖 公 章 ， 连 同 单位 营业 
执照 副本 复印 件 (或 政府 机 构 条 码 证 书 复印 件 ) 一 同 提交 ， 才 能 申请 注册 。 


当 申 请 好 了 域名 之 后 ， 下 一 步 就 是 为 网 站 建立 网 络 服 务 器 。 网 络 服务 器 要 用 专线 或 其 他 
的 方式 与 因特网 连接 。 这 种 网 络 服务 器 除了 存放 企业 的 网 页 、 为 浏览 者 提供 浏览 服务 之 外 ， 
还 可 以 提供 企业 邮箱 服务 ， 企 业 邮 箱 是 负责 收发 企业 电子 邮件 的 。 此 外 还 可 以 在 服务 器 上 添 
加 各 种 各 样 的 网 络 服务 功能 ， 前 提 是 有 足够 的 拉 术 支持 。 

通 单 建立 网 络 服务 器 的 模式 有 两 种 ， 分 别 是 指 购买 独立 的 服务 研 和 租用 虚拟 空间 。 

购买 独立 的 服务 器 是 企业 在 购买 了 服务 器 之 后 ， 将 其 托管 于 一 些 网 络 服 务 机 构 ( 该 机 构 
要 有 良好 的 因特网 接 入 环境 )， 每 年 支付 一 定数 额 的 托管 费用 。 购 买 服务 器 的 费用 非常 高 ， 
而 且 需 要 专业 的 托管 设备 和 维护 人 员 ， 如 果 需 要 的 功能 不 太 多 、 商 品 的 数量 也 不 是 很 大 ， 则 
租用 服务 器 是 比较 好 的 选择 。 

租用 的 服务 器 空间 也 就 是 虚拟 主机 ， 用 来 存放 所 有 了 网页。 所 以 虚拟 主机 的 优 劣 直接 影响 
网 站 的 稳定 ， 主 要 的 考查 指标 是 带宽 、 主 机 配置 、CGI 权限 、 数 据 库 、 服 务 和 技术 支持 ， 而 
空间 适量 即 可 。 对 企业 网 站 甚至 一 些 门户 网 站 来 说，100MB 已 是 一 个 足够 大 的 空间 。 如 果 单 
纯 放 置 文字 ， 则 可 容纳 100MB， 相 当 于 5000 多 万 个 汉字 ; 若 以 标准 网 页 计算 ， 大 致 可 容纳 
1000 页 A4 幅面 的 网 页 和 2000 张 网 页 图 片 。 

通过 上 和 面 的 描述 就 可 以 明白 网 站 建设 的 域名 和 空间 是 一 个 真实 存在 并 可 以 用 于 交易 的 商 
品 。 如 果 在 网 上 兼职 ， 则 可 以 从 做 一 个 专业 销售 域名 和 网 站 空间 的 代理 商 入 手 ， 在 因特网 平 
侣 上， 现在 这 类 代理 商 占 了 很 大 一 块 市 场 ， 如 大 家 所 熟悉 的 万 网 ， 如 图 1-2 所 示 。 
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国 图 1-2 ”从 事 域名 和 空间 服务 器 商 


2. 网 页 设计 师 

在 购买 了 域名 和 空间 后 ， 就 是 利用 专业 网 站 建设 软件 来 实现 整个 网 站 建设 。 对 于 网 站 建 
设 按 专业 制作 可 以 划分 为 网 站 UI 设计 和 网 站 结构 建设 两 大 部 分 。 为 了 丰富 网 页 的 内 容 ， 增 
加 网 页 美观 性 和 实用 性 ， 网 页 制作 中 常用 到 的 主要 有 如 下 几 款 软件 ， 如 Photoshop ( Adobe 
公司 提供 的 通用 图 像 设计 软件 )、Flash ( Adobe 公司 提供 的 Flash 网 页 动画 制作 软件 )、 
Dreamweaver ( Adobe 公司 提供 的 网 页 制作 软件 ) 等 ， 这 些 图 片 设 计 人 处理 软件 也 属于 常用 的 网 
页 制作 软件 。 下 面 就 为 大 家 介绍 做 一 个 兼职 的 网 页 设计 师 需 要 掌握 的 相关 软件 。 


J7 兼 职 指导 : 
UI 的 本 意 是 用 户 界 面 ， 是 英文 User 和 Interface 的 缩写 。 在 网 站 建设 工作 中 ，UI 设计 师 
是 指 利 用 平面 设计 软件 专门 从 事 网 页 视觉 效果 的 设计 师 。 


Photoshop ( Adobe 公司 提供 的 通用 图 像 设 计 软 件 ) 是 目前 最 单 用 的 平面 设计 软件 ， 从 
Photoshop 6.0 开始 ， 该 软件 就 加 入 了 网 络 图 像 僚 用 的 功能 ， 到 Photoshop CS5 版 本 ， 更 完善 
了 图 像 网 页 的 发 布 功能 。 启 动 Photoshop C55 后 ， 将 进入 如 图 1-3 所 示 的 界面 。 

Dreamweaver 也 是 Adobe 公司 推出 的 网 页 编辑 工具 。 它 是 一 个 可 视 化 网 页 编辑 器 ， 能 够 
使 网 页 和 数据 库 关联 起 来 ， 支 持 最 新 的 DHTML 和 CSS 标准， 采用 了 多 种 先进 技术 ， 能 够 快速 
高 效 地 创建 极 具 表现 力 和 动感 效果 的 网 页 ， 使 网 页 创作 过 程 变 得 简单 无 比 。Dreamweaver 
CS6 提供 了 更 多 功能 强劲 的 可 视 化 设计 工具 、 应 用 开发 环境 以 及 代码 编辑 文 持 ， 使 开发 人 员 
和 设计 师 能 够 快捷 地 创建 代码 规范 的 应 用 程序 ， 集 成 程度 非 单 高 ， 开 发 环境 精简 而 高 效 。 开 
发 人 员 能 够 运用 Dreamweaver C56 与 服务 器 技术 构建 功能 强大 的 网 络 应 用 程序 衔接 到 用 户 的 


数据 、 网 络 服务 体系 。Dreamweaver C56 启动 界面 如 图 1-4 所 示 。 
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国 图 1-3 Photoshop CS5 主 操 作 界 面 
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硬 图 1-4 Dreamweaver CS6 启动 界面 


了 7 兼职 指导 ; 

除了 Dreamweaver 之 外 ， 微 软 的 办 公 软 件 Office 家 族 成 员 之 一 的 FrontPage 也 是 一 种 所 
见 即 所 得 的 网 页 制作 软件 ， 由 于 其 使 用 简单 (与 一 般 文本 软件 使 用 方法 类 似 ) 并 且 软 件 容易 
获得 ， 也 很 受 初 学 者 的 欢迎 。 作 为 入 门 级 的 网 页 制作 学 习 ，FrontPage 是 不 错 的 选择 。 
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Flash 是 于 1999 年 6 月 推出 的 优秀 网 络 动画 设计 软件 。 它 是 一 种 交互 式 动 男 设 计 工 具 ， 
用 它 可 以 将 音乐 、 音 效 、 图 像 、 图 形 、 动 男 以 及 视频 有 机 结合 ， 制 作出 扩展 名 为 .swf 的 文 
件 ， 实 现 高 品质 的 动态 效果 。 

众所周知 ，HTML 语言 的 功能 十 分 有 限 ， 无 法 达到 人 们 的 预期 设想 ， 无 法 实现 令 人 耳目 
一 新 的 动态 效果 。 在 这 种 情况 下 ， 各 种 脚本 语言 应 运 而 生 ， 使 得 网 页 设计 更 加 多 样 化 。 然 
而 ， 程 序 设 计 总 是 不 能 很 好 地 普及 ， 因 为 它 要 求 一 定 的 编程 能 力 ， 而 人 们 更 需要 一 种 既 简单 


' 直观 又 功能 强大 的 动画 设计 工具 。Flash 的 出 现 正 好 满足 了 这 种 需求 ， 它 具有 很 强 的 交互 
”性 ， 既 可 以 散 入 到 网 页 中 ， 也 可 以 作为 独立 的 网 页 ， 同 时 还 可 以 制作 其 他 多 媒体 应 用 。Flash 


C55 局 动 界 血 如 图 1-5 所 示 。 
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硬 图 1-5 Flash CS5 启动 界面 


3. 网 站 程序 员 

网 页 制作 拉 术 发 展 日 新 月 弄 ， 作 为 从 事 网 站 开发 建设 的 设计 师 是 到 运 的 ， 因 为 能 够 在 虚 
拟 的 网 络 上 留 有 自己 的 建树 ， 但 同时 又 是 侍 吉 的 ， 因 为 需要 不 断 地 学 习 和 应 用 。 

页 面 美工 设计 主要 是 设计 整个 网 站 的 页 面 桂 式 ， 制 作 员 主 要 就 是 把 设计 师 设 计 好 的 结构 
图 制作 成 Web 标准 页 徊 ， 程 序 师 根据 客户 所 需要 的 功能 和 空间 来 设计 网 站 相关 程序 。 程 序 分 
ASP、.net、PHP、JSP 等 。 通 常 ，JSP 在 大 型 企业 用 得 比较 多 ， 所 以 相对 来 说 ，JSP 的 技术 合 
量 比较 高 ， 用 的 人 也 比较 少 且 比较 精 ， 而 .net、ASP、PHP 这 三 个 程序 相对 招 的 人 就 比较 多 ， 
六 多 中 小 型 企业 都 用 这 三 种 程序 ， 而 只 要 学 好 学 精 这 三 种 程序 中 的 一 种 ， 对 一 个 程序 员 而 言 
就 足够 用 了 ， 因 为 同样 的 程序 功能 用 这 三 种 程序 中 的 任何 一 种 都 可 以 实现 。 


7 之 兼 职 指 导 : 

对 于 在 网 上 兼职 的 人 员 来 说 ， 如 果 想 成 为 一 个 全 能 的 网 站 制作 人 员 ， 则 首先 要 学 会 网 页 
的 设计 ， 掌 握 使 用 Dreamweaver 进行 网 页 排版 。 如 果 能 掌握 ASP 这 样 入 门 级 的 网 站 程序 就 
更 好 了 ， 因 为 只 要 有 些 基 础 就 可 以 完全 单独 制作 一 个 成 型 的 网 站 作品 。 


1.1.2 寻找 网 站 建设 网 络 丙 机 


因特网 提供 了 一 个 广阔 无 地 理 区 域 限制 的 交流 平 全 ， 任 何 供求 信息 都 可 以 在 因特网 上 发 
市 并 找到 ， 特 别 是 搜索 引 警 的 出 现 。 同 时 ， 一些 专 业 供 求 平谷 的 出 现 ， 更 是 方便 了 大 家 寻找 
商机 。 就 目前 而 言 ， 想 在 因特网 上 找到 建筑 家 源 设 计 的 网 络 商机 ， 主 要 可 以 从 如 下 几 个 方面 

) 使 用 搜索 引擎 搜索 。 到 相应 的 


兼职 信息 。 ee， a a ee 内 信息 “寻找 建 
站 ”， 如 图 1-6 所 示 。 
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大 图 1-6 使 用 百度 搜索 


输入 关键 词 后 ， 单 击 “ 百 度 一 下 ”按钮 ， 即 可 以 弹出 大 量 的 求 兼职 设计 的 信息 ， 如 
| 所 示 。 
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国 图 1-7 搜索 到 的 求 兼职 设计 的 信息 
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单 击 信息 ， 即 可 以 打开 详细 的 信息 内 容 ， 可 以 看 到 设计 要 求 和 一 些 基 础 情 
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的 详细 信息 


) 到 专业 供求 信息 平 侣 发布 求 兼职 信息 。 在 搜索 引擎 网 站 上 可 以 搜索 到 发 布 的 信息 ， 
但 一 些 客 户 需要 寻找 兼职 的 设计 人 员 时 ， 同 时 也 会 使 用 搜索 引擎 网 站 进行 检索 。 这 就 要 求 要 
在 一 些 供求 信息 的 兼职 栏目 里 发 布 自己 的 求 兼 职 的 信息 。 如 大 家 熟悉 的 “赶集 网 "、"263 北 
泵 信息 平台 ”"、“ 闻 合 ” 等 ， 如 图 1-9 所 示 。 当 然 还 有 一 些 更 专业 化 、 概 念 化 的 一 些 网 站 ， 如 
威 客 网 中 的 " 八 式 网 "。 
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国 图 1-8 兼职 
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国 图 1-9 发 布 个 人 求 兼 职 信 息 
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(3 ) 包 痰 自己 ， 扩大 影响 力 。 任 何 经 营 想 要 有 有 市场， 都 需要 经 过 包 淮 。 做 反 术 兼职 ， 可 
以 成 立 自己 的 建筑 装修 工作 室 ， 设 计 名 片 ， 如 果 有 网 页 设计 技能 ， 蝎 可 以 设计 自己 的 个 人 网 
站 ， 发 布 一些 自 己 的 得 意 作 品 和 创意 心得 。 尽 量 多 积 素 一 些 作 品 ， 如 果 是 刚 开 始 兼 职 创 作 ， 
则 可 以 先 设计 一 些 虚 拟 的 作品 ， 因 为 客户 在 委托 时 基本 上 是 会 看 设计 师 的 作品 。 其 次 ， 可 以 
角 过 关系 网 ， 从 周围 的 朋友 开始 做 起 。 关 系 网 是 寻找 兼职 工作 的 捷径 ， 一 个 性 格外 向 、 善 于 
交际 的 人 做 事 往往 让 人 放心 ， 所 以 很 多 人 都 襄 欢 把 事情 交 给 这 样 的 人 去 做 。 有 了 宽广 的 关 
系 ， 很 多 时 候 会 有 熟人 主动 请 去 做 兼职 工作 。 

(4 ) 积累 一 定 的 经 验 ， 掌 握 面 试 技 能 。 掌 握 射 试 扩 能 ， 不 管 是 电话 疯 计 还 是 当 向 沟 退 ， 
都 要 把 握 好 目 己 讲 请 的 力度 ， 要 用 最 完美 、 专 业 的 语言 让 对 方 决定 用 你 。 作 为 一 个 职业 的 网 
六 设计 师 ， 并 不 是 掌握 使 用 软件 就 哆 ， 需 要 设计 师 在 平时 不 断 学 习 网 站 建设 方面 的 知识 ， 鞋 
握 网 站 建设 的 经 验 ， 会 配色 ， 并 能 给 客户 提 傣 专业 的 指导 意见 。 建 议 读者 可 以 浏览 一 些 知 名 
设计 师 的 图 书 作品 ， 掌 握 一 些 概 念 以 备用 。 


rs, 在 寻找 网 上 兼职 机 会 时 ， 要 小 心 上 当 受 骗 。 碰 到 介绍 工作 要 求 先 交 介 绍 
注意 “| 费 ,或 先入 会 缴费 、 办 会 员 卡 缴费 等 情况 ， 都 应 谨慎 对 待 。 


1.1.3 ”进行 网 站 建设 的 步骤 


在 开始 学 习 具 体 的 网 站 制作 内 容 之 前 ， 要 先 了 解 在 Dreamweaver 中 的 网 页 设计 和 发 布 流 
程 。 它 可 以 分 为 如 下 5 个 主要 步骤 。 

第 一 步 : 规划 网 站 站 点 

需要 了 解 网 站 建设 的 目的 、 网 站 提供 的 服务 以 及 针对 的 是 什么 类 型 的 访问 人 群 ， 以 确定 
网 页 中 应 该 出 现 什么 内 容 。 

第 二 步 : 建立 站 点 的 基本 结构 

在 Dreamweaver CS6 中 ， 可 以 在 本 地 计算 机 上 建立 整个 站 点 的 框架 ， 并 在 各 个 文件 夹 中 


合理 安置 文档 。Dreamweaver CS6 可 以 在 站 扩 窗 口中 以 两 种 方式 显示 站 所 结构 ， 一 种 是 目录 
结构 ， 男 一 种 是 站 扣 地 图 。 可 以 使 用 站 护 地 图 方式 快速 构建 和 查看 站 点 原型 。 一 旦 创建 了 本 
地 站 扣 并 生成 了 相应 的 站 幢 结构， 并 创建 了 即将 进一步 编辑 的 各 种 文档 ， 就 可 以 在 其 中 组 织 
文档 和 数据 。 


第 三 步 ， 实现 所 有 页 面 的 设计 

建立 站 所 之 后 ， 进 入 Dreamweaver CS6 软件 中 ， 开 始 进 行 页 面 的 版 面 规 划 设 计 ， 利 用 强 
大 的 编辑 设计 功能 实现 各 种 复杂 的 表格 ， 然 后 再 组 织 页 徊 内 容 。 为 了 保持 页 和 面 的 统一 风格 ， 
可 以 利用 模板 来 快速 生成 文档 。 

第 四 步 : 充实 网 页 内 容 

在 创建 了 基本 版 男 页 面 后 ， 就 要 往 框 染 里 填充 内 容 。 在 文档 窗口 中 合适 的 位 置 ， 可 以 输 
入 文字 和 其 他 资源 ， 例 如 图 像 、 水 平 线 、Flash 插件 和 其 他 对 象 等 ， 大 多 可 以 通过 插入 面板 
或 插入 菜单 来 完成 。 

第 五 步 ， 发 布 和 维护 更 新 

在 站 点 编辑 完成 后 ， 需 要 将 本 地 的 站 点 同位 于 Internet 服务 右上 的 远 端 站 后 关 联 起 
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来 ， 把 本 地 设计 好 的 网 站 内 容 传 到 服务 器 上 ， 并 注意 后 期 的 随时 更 新 和 维护 。 


1.2 ”从 规划 设计 开始 兼职 


下 面 介 绍 一 些 关 于 网 站 规划 设计 的 内 容 。 在 兼职 设计 网 站 之 前 ， 要 先 明 人 确 网 站 的 
风格 及 特点 ， 这 对 具体 的 设计 是 很 有 利 的 。 网 站 设计 包含 的 内 容 非 常 多 ， 大 体 分 为 两 
rai 

(1 ) 一 方面 是 利用 制作 网 站 的 软件 ， 如 Dreamweaver 进行 网 页 框架 、 文 字 布 局 、 页 面 链 
接 、 动 态 效果 等 设计 ， 也 包括 利用 Photoshop 或 者 是 Fireworks 等 平面 设计 软件 实现 平面 设 
计 、 静 态 无 声 图 片 设计 ， 或 利用 Flash 实现 动 国 效果 。 

( 2 ) 另 一 方面 是 网 站 的 延伸 设计 ， 它 是 指 脱 离 网 站 制作 软件 ， 在 网 站 建设 之 前 和 之 后 进 
行 的 网 站 建设 与 策划 ， 主 要 包括 网 站 主题 定位 、 用 户 群 定位 、 智 能 交互 、 制 作 策 划 、 形 象 包 
疙 和 宣传 营 请 等 。 


1.2.1 网 站 的 栏目 设计 


在 明确 网 站 的 主题 和 风格 后 ， 就 应 该 围 统 主 题 制作 相应 的 网 页 内 容 ， 设 计 相 应 的 题材 栏 
目 。 以 下 列 出 一 些 前 见 的 栏目 名 称 ， 硕 望 对 读者 有 所 局 发 。 
( 1 ) 资讯 信息 类 : 产品 展示 、 在 线 加 盟 、 上 股市 信息 、 流 行情 报 、 在 线 搜索 、 购 物 消 费 、 


(2 ) 教育 学 习 类 : Windows 扩 巧 、 网 页 研习 室 、 计 算 机 杂志 、 硬 件 开讲 、 人 少年 园地 、 影 
像 合 成 、 黑 客 资讯 、Java 小 屋 、 病 毒 字 典 、 网 上 教室 、 超 频 天 尝 、 软 件 宝库 等 。 


(3 ) 娱乐 生活 类 古典 音乐 、 国 男 国 廊 、 陶 艺 园 地 、 漫 男 天 地 、 摄 影 俱 乐 部 、 幽 默 轻 
松 、 体 育 博览 、 电 子 贺 卡 、 旅 游 天 地 、 电 影 世 界 、 影 视 偶像 、 天 文 星空 、MIDI 金曲 、 儿 和歌 专 
集 、 健 康 资讯 。 


1.2.2 ”定位 网 站 VI 形象 


一 个 好 的 网 站 和 实体 公司 一 样 ， 也 需要 整体 的 形象 包 闭 和 设计 。 准 确 的 、 有 创意 的 VI 
( Visual Ident 放 y， 视 总 识别 ) 设计 ， 对 网 站 的 宣传 推广 有 事半功倍 的 效果 。 所 请 VI， 就 是 
通过 视觉 来 统一 网 站 的 形象 。 在 确定 网 站 主题 和 名 称 之 后 ， 需 要 思考 的 问题 就 是 网 站 的 VI 
形象 。 其 实现 实生 活 中 成 功 的 VI 策划 比比 缘 是 ， 例 如 可 口 可 乐 公 司 使 用 全 球 统一 的 标志 、 
色彩 和 产品 包装 ， 给 人 的 印象 极为 深刻 。 

以 下 对 网 站 VWI 形象 的 几 个 重要 方面 进行 介绍 。 

1. 设计 网 站 Logo 

网 站 Logo 是 网 站 的 标志 ， 就 如 同 公 司 的 商标 一 样 ，Logo 是 站 点 特色 和 内 涵 的 集中 体 
现 ， 看 见 Logo 就 让 人 联想 起 站 氮 。 现 在 网 站 相当 多 ， 要 想 吸 引 更 多 的 人 访问 企业 的 网 站 ， 
与 其 他 网 站 进行 Logo 链接 交换 也 是 很 有 必要 的 。 就 是 说 在 其 他 网 站 上 放 一 个 本 网 站 的 
Logo， 并 可 以 通过 单 击 该 Logo 链接 到 本 企业 的 网 站 。 如 果 网 站 的 Logo 比较 引 人 注 目 ， 那 么 
就 能 为 网 站 市 来 更 多 的 访问 量 。 


Logo 可 以 由 中 文 文字 、 英 文字 和 母 、 阿 拉 伯 数字 、 符 号 和 图 案 等 构成 。 比 如 新 浪 网 用 字母 
Sina+ 眼 睛 作为 网 站 的 Logo。 


了 7 兼职 指导 : 
如 果 企 业 本 身 拥 有 不 错 的 企业 Logo， 也 可 以 用 做 网 站 的 Logo， 这 样 能 让 用 户 的 网 站 VI 
和 企业 的 VI 保持 一 致 . 


一 个 网 络 Logo 不 应 只 考虑 在 设计 师 手 中 的 显示 效果 ， 应 该 考虑 到 当 网 站 整体 发 展 到 一 
个 高 度 时 ， 相 应 的 推广 活动 所 要 求 的 各 类 效果 ， 使 其 在 应 用 于 各 种 媒体 时 ， 也 能 充分 发 挥 视 
帝 效 果 ， 同 时 应 使 用 能 够 让 多 数 用 户 喜 欢 、 印 象 深刻 的 造型 。 

还 应 考虑 到 Logo 在 传真 、 报 纸 、 杂 志 等 纸 介 奈 上 的 单 色 效 果 、 反 白 效 果 、 在 织物 上 的 
纺织 效果 、 在 车 体 上 的 油漆 效果 、 制 作 微 草 时 的 金属 效果 、 墙 面 立 体 的 造型 效果 等 。 

2. 设计 网 站 的 标准 色彩 

“标准 色彩 ”是 指 能 体现 网 站 形象 和 延伸 内 涵 的 色彩 。 举 几 个 实际 的 例子 ，IBM 的 深蓝 
色 字 体 ， 肯德基 的 红色 条 块 ，Windows 视窗 标志 上 的 红 、 监 、 黄 、 绿 色 块 ， 这 些 色 彩 都 使 人 
联想 到 它们 与 对 应 企业 的 关系 。 

网 站 给 人 的 第 一 印象 来 自视 部 冲击 ， 所 以 确定 网 站 的 标准 色彩 是 相当 重要 的 一 步 。 不 同 
的 色彩 搭配 产生 不 同 的 效果 ， 并 可 能 影响 到 网 页 浏览 者 的 情绪 。 网 站 标准 色彩 的 选择 和 确 
定 ， 是 由 网 站 的 主题 和 企业 自身 的 特 总 而 决定 的 。 

一 个 网 站 的 标准 色彩 不 超过 3 种 ， 六 多 则 会 让 人 眼花 绷 乱 。 标 准 色彩 要 用 于 网 站 的 
Logo、 标 题 、 主 菜单 和 主 色 块 ， 从 整体 上 给 人 以 统一 的 感觉 。 至 于 其 他 色彩 也 可 以 用 ， 但 只 


作为 点 缀 和 衬托 ， 绝 不 能 喧 宾 夺 主 。 适 合 于 网 站 标准 色 的 颜色 有 蓝 色 、 黄 /楼 色 、 黑 / 灰 / 白 色 
三 大 系列 色 。 
7 兼职 指导 : 


1. 明确 网 站 所 要 传达 的 信息 ， 选 择 可 以 加 强 这 些 信息 的 颜色 。 如 果 在 设计 一 个 金融 机 
构 的 网 站 时 ， 就 要 选择 冷色 系 、 柔 和 的 颜色 ， 如 蓝 、 灰 或 绿 。 给 人 以 稳健 可 靠 的 感觉 。 如 果 
使 用 上 暖色 系 或 活 小 的 颜色 ， 就 有 可 能 破坏 该 网 站 的 整体 感觉 

2. 定位 网 站 的 用 户 群 。 不 同 用 户 的 文化 差异 可 能 会 使 色彩 产生 非 预 期 的 反应 。 同 时 ， 
不 同 地 区 、 不 同年 龄 层 的 用 己 对 颜色 的 反应 亦 会 有 所 不 同 。 年 轻 族群 一 般 比 较 喜 欢 饱和 色 ， 
比如 www.chinaren.com 上 的 校友 录 ， 采 用 的 是 年 轻 人 吝 欢 的 大 青 大 绿 的 饱和 色 ， 但 这 样 的 顾 
色 并 不 一 定 能 迎合 高 年 龄 层 用 户 的 喜好 。 

3 不 要 使 用 过 多 的 颜色 。 除 了 黑色 和 白色 以 外 ， 再 选择 四 五 个 颜色 就 够 了 。 太 多 的 颜 
色 会 导致 混乱 ， 也 会 分 散 读者 的 注意 力 。 

4. 最 好 在 文字 部 分 使 用 对 比 色 。 顾 色 太 接近 无 法 产生 足够 的 对 比 效果 ， 就 会 影响 浏览 
者 的 阅读 。 和 白 底 黑 字 的 阅读 效果 最 好 ，。 

5， 选择 颜色 要 注意 时 效 性 。 不 要 一 味 追 赶 流行 和 色彩， 流行 色彩 的 运用 并 不 能 保证 网 站 
一 定 可 以 达到 引 人 注 目的 效果 。 

6. 在 用 软件 设计 网 页 时 ， 选 择 顾 色 请 考虑 功能 性 的 颜色 。 别 忘 了 为 关键 信息 部 分 (如 
标题 和 超级 链接 等 ) 建立 功能 性 的 颜色 ， 
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7. 注意 网 站 色差 问题 。 每 一 个 网 站 开发 人 员 都 知道 ， 即 使 是 网 络 通用 颜色 在 跨 平 台 显 
示 时 也 会 有 些 不 同 ， 应 在 不 同 的 平台 上 测试 网 页 的 效果 。 


通 童 来访， 不同 的 色彩 所 传达 的 含义 如 下 。 

1 ) 红色 : 热情 、 浪 漫 、 火 焰 、 暴 力 、 侵 略 。 红 色 和 在 很 多 文化 中 代表 的 是 停止 的 信号 ， 
用 于 警告 或 禁 站 一 些 动 作 。 

2 ) 紫色 : 创造 、 文 、 上 忠诚 、 神 秘 、 稀 有 。 兹 色 在 某 些 文化 中 与 死亡 有 有 关 。 

3 ) 蓝 色 : 忠诚 、 安 人 全、 保守、 宁静 、 冷 深 、 莫 伤 。 

4 ) 绿色 : 自然、 稳定 、 成 长 、 尽 妨 。 绿 色 在 某 些 文化 中 与 环保 有 关 。 

5 ) 黄色 : 明亮 、 光 次、 疾病 、 恨 弱 。 

6 ) 黑色 : 能力、 精致 、 现 代 感 、 死 亡 、 病 态 、 和 收 恶 。 

7 ) 白色 : 纯洁、 天真、 洁净 、 真 理 、 相 六 、 冷 痰 、 人 贫乏。 

3. 设计 网 站 的 标准 字体 

和 和 标准 色彩 一 样 ， 标 准 字体 是 指 用 于 标志 、 标 题 、 主 菜单 的 特有 字体。 一 般 网 站 默认 的 
字体 是 宋体 。 为 了 体现 网 站 的 “与 众 不 同 ”， 可 以 根据 需要 选择 一 些 特别 字体 。 例 如 体现 专 
业 可 以 使 用 粗 仿宋 体 ， 体 现 设 计 精 美 可 以 用 广告 体 ， 体 现 杀 切 随 意 可 以 用 手写 体 等 。 当 然 要 
根据 自己 网 站 所 表达 的 内 容 ， 选 择 贴切 的 字体 。 

目前 常见 的 中 文字 体 有 二 三 十 种 ， 机 网 络 上 还 有 许多 专用 的 天 
文艺 术 字 体 下 载 ， 要 寻找 一 款 满意 的 字体 并 不 算 困 难 。 需 要 说 明 的 是 ， 如 果 使 用 非 默 认 字 
体 ， 就 需要 把 文字 内 容 设 置 成 图 片 的 格式 ， 因 为 很 可 能 浏览 者 的 计算 机 因 疫 有 安装 这 种 特别 
字体 而 无 法 正音 显示 ， 那 么 储 吾 设计 的 作品 便 会 付 之 东 流 。 


1.2.3 网 站 的 宣传 标语 


网 站 的 宣传 标语 通常 是 用 一 句 话 甚至 一 个 词 来 高 度 概括 该 网 站 的 主题 、 特 色 和 风格 ， 类 
似 针 对 具体 产品 的 广告 用 语 。 例 如 淘宝 网 的 “ 淘 啊 ! 淘 啊 ! 淘 1”"， 易 趣 的 “交易 的 乐趣 !” 
和 “加 入 eBay 易趣 ， 发 现 多 倍 乐 趣 "， 全 球 赫 赫 有 名 的 Yahoo 就 用 了 一 句 “ 人 今天， 你 Yahoo 
了 吗 ? ”等 。 

也 可 以 把 企业 自己 的 企业 宣传 用 语 用 做 网 站 的 宣传 标语 ， 如 果 是 推广 产品 型 的 网 站 ， 最 
好 使 用 产品 的 宣传 广告 语 。 


1.2.4 ”确定 网 站 框架 


选 定 了 一 个 好 的 题材 ， 是 不 是 就 可 以 立刻 动手 制作 了 ? 其 实 不 然 ， ei 
站 的 框 染 ， 这 是 很 重要 的 一 步 ! 在 目标 明确 的 基础 上 ， 完 成 网 站 的 构思 创意 即 总 体 设 计 方 
案 。 要 做 到 主题 鲜明 突出 、 要 点 明确 ， 以 简单 明确 的 语言 和 画 面体 现 站 扣 的 主题 。 调 动 一 切 
手段 充分 表现 网 站 的 个 性 和 情趣 ， 突 出 网 站 的 特 挟 。 

网 站 应 具备 的 基本 成 分 包括 以 下 几 个 内 容 。 

(1 ) 页 头 : 准确 无 误 地 标识 用 户 的 站 挟 和 企业 标记 。 

( 2 ) 联系 方式 ， 如 企业 的 地 址 、 电 话 和 E-mail 地址 。 

3 ) 版 权 信息 : 声明 版 权 所 有 者 等 。 


六 兼职 指导 : 
要 充分 利用 已 有 的 信息 ， 如 客户 手册 、 公 共 关 系 文档 、 技 术 手 册 和 数据 库 等 内 容 ， 可 以 
选择 性 地 用 到 企业 的 Web 站 点 中 。 


规划 一 个 网 站 ， 可 以 用 树 状 结 构 先 把 网 站 的 大 纲 列 出 来 ， 尤 其 当 用 户 要 制作 一 个 结构 庞 
大 ( 有 很 多 页 面 ) 的 网 站 时 ， 蝎 需要 把 网 站 的 框 染 规 划 好 ， 并 要 考虑 到 未 来 可 能 的 业务 需 水 
和 和 规模 扩充 ， 人 免得 以 后 修改 整个 网 站 的 框 染 。 

大 纲 列 出 来 后 ， 还 必须 考虑 每 个 页 向 之 间 的 链接 关系 ， 是 星 型 、 树 型 ， 还 是 网 型 链接 ， 
这 也 是 判别 一 个 网 站 优 劣 的 重要 标记。 链接 兹 乱 、 层 次 不 清 的 站 扩 会 造成 用 户 浏 怖 困难 ， 降 
低 网 站 内 容 的 影响 力 。 

为 了 提高 浏览 效率 ， 方 便 信息 的 吾 找 ， 一 般 的 网 站 框架 基本 采用 “ 浦 公关 ” 式 ，“ 浦 
公 严 ” 式 即 指 所 有 的 主要 链接 都 在 首页 上 ， 主 次 链接 之 间 相 互 链接 是 可 逆 的 。 如 图 1 一 10 
所 示 ， 流 行动 态 、 最 新 专辑 、 在 线 昕 歌 、 普 泉 教 宇 、 星 区 灿烂 为 大 版 块 ， 搜 索引 擎 、 歌 
曲 排行 、 友 情 链接 分 别 以 不 同 的 功能 实现 在 首页 上 。 其 中 搜索 引擎 为 实现 站 内 的 搜索 功 
能 ， 歌 曲 排行 可 以 用 氮 击 么 计 功 能 实现 ， 友 情 链 接 是 通过 与 其 他 网 站 的 链接 实现 目 身 网 站 的 


访问 量 。 





外 


普 乐 教室 


Te 
Ta 


友情 链接 
图 1-10 确定 的 栏目 版 块 


框 膝 定 下 来 了 ， 就 可 以 开始 一 步 一 步 有 条 理 、 有 次 序 地 制作 网 站 ， 也 为 网 站 将 来 发 展 打 
下 了 民 好 的 基础 。 


1.2.5 ”资料 收集 


网 站 建设 过 程 中 常常 需要 大 量 的 素材 资料 ， 比 如 新 闻 发 布 、 产 品 技术 知识 、 行 业 动 态 、 
图 片 等 ， 可 以 在 网 上 或 是 通过 其 他 途径 收集 一 些 资 料 进 行 充 实 。 一 个 好 的 方法 是 到 百度 
( http:/Aww.baidu.com/ )、 北 大 天 网 ( http:We.pku. edu.cm )、 雅 虎 中 国 ( http://cn.yahoo.com/ ) 和 
搜狗 ( http://www.sogou.com/ ) 等 搜索 引擎 上 查找 相应 的 关键 字 ， 就 可 以 找到 许多 相关 的 资料 
和 信息 。 








已 
1 
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1.3 网 站 制作 注意 事项 


制作 网 站 还 要 特别 注意 如 下 一 些 问题 ， 以 保证 开发 的 网 站 可 以 满足 各 项 要 求 。 

] .网 站 的 版 式 设计 

网 站 的 版 式 设计 通过 文字 图 形 的 空间 组 合 ， 表 达 和 谐 与 美 。 一 个 优秀 的 网 站 设计 者 应 该 
知道 哪 一 段 文字 图形 放 在 什么 位 置 ， 才 能 使 整个 网 站 生 泛 。 多 页 面 站 点 的 编排 设计 要 求 把 页 
面 之 间 的 有 机 联系 反映 出 来 ， 特 别 应 处 理 好 页 面 之 间 和 页 面 内 的 秩序 与 内 容 的 关系 。 

2. 网 站 形式 与 内 容 相 统一 

要 将 丰富 的 意义 和 多 样 的 形式 组 织 成 统一 的 页 面 结 构 。 运 用 对 比 与 调和 、 对 称 与 平衡 、 
太 友 与 韵律 以 及 留 白 等 手段 ， 通 过 空间 、 文 字 、 图 形 之 则 的 相互 关系 建立 整体 的 均衡 状态 ， 
产生 和 和 谐 的 美感 。 例 如 在 页 面 设计 中 ， 对 称 原则 的 均衡 有 时 会 使 页 面 显得 采 板 ， 但 如 果 加 入 
一 些 富有 动感 的 文字 、 图 案 ， 或 采用 夸张 的 手法 来 表现 内 容 ， 则 往往 会 达到 比较 好 的 效果 。 

3. 三 维 空间 的 构成 和 虚拟 现实 

网 络 上 的 三 维 空间 是 一 个 假想 空间 ， 这 种 空间 关系 需 借助 动静 变化 、 图 像 的 比例 关系 等 
空间 因素 表现 出 来 。 在 页 面 中 ， 图 片 、 文 字 位 置 前 后 晋 讨 ， 或 页 面 位 置 变化 所 产生 的 视觉 效 
果 都 各 不 相同 。 网 站 上 常见 的 是 页 惫 上 、 下 、 左 、 右 、 中 位 置 所 产生 的 空间 关系 ， 以 及 玻 密 
的 位 置 关系 所 产生 的 空间 层次 ， 这 两 种 位 置 关 系 使 产生 的 空间 层次 富有 弹性 ， 同 时 也 让 人 产 
生 轻 松 或 案 迫 的 感 帝 。 

4. 多 妹 体 功能 的 利用 

网 页 的 优势 之 一 是 多 媒体 功能 。 要 吸引 训 览 者 注意 ， 页 面 的 内 容 可 以 用 声音 、 视 频 、 
Flash 动画 等 来 表现 。 但 要 注意 ， 由 于 网 络 带 宽 的 限制 ， 在 使 用 多 媒体 形式 表现 网 站 的 内 容 
时 ， 应 考虑 客户 疹 的 传输 速度 。 

5. 网 站 测试 和 改进 

测试 实际 上 是 模拟 用 户 询 问 网 站 的 过 程 ， 用 以 发 现 问题 并 改进 设计 。 要 注意 让 用 户 参 与 
网 站 测试 。 

6. 内 容 更 新 与 沟通 

网 站 建立 后 ， 要 不 断 更 新 站 点 的 内 容 ， 让 浏览 者 了 解 企 业 的 发 展 动态 和 产品 等 信息 ， 同 
时 也 会 有 助 于 提升 企业 形象 。 要 认真 回复 用 户 的 电子 邮件 、 人 信件、 电话 咨询 和 传真 ， 与 用 户 
进行 充分 的 沟通 。 

7. 合理 运用 新 技术 

要 合理 地 运用 网 站 制作 的 新 技术 ， 切 忌 将 网 站 变 为 一 个 制作 网 站 的 技术 展台 ， 永 远 记 住 
用 户 方便 快捷 地 得 到 所 需要 的 信息 才 是 最 重要 的 。 对 于 网 站 设计 者 来 说 ， 学 习 跟 踪 网 站 设计 
的 新 技术 是 必要 的 ， 但 要 根据 实际 情况 的 需要 ， 合 理 地 将 其 应 用 到 网 站 建设 中 。 


网 页 的 美工 设计 和 和 


在 因特网 上 兼职 网 页 设计 的 需求 还 是 特别 大 ， 不 论 
是 企业 网 站 ， 还 是 个 人 网 站 ， 在 建设 网 站 之 前 ， 首 先 要 
实现 网 页 的 设计 工作 。 作 为 兼职 网 页 设计 师 车 握 网 页 的 
美工 和 排版 设计 ， 并 掌握 一 定 的 基础 网 页 知识 是 非常 重 
要 的 。 本 章 主要 介绍 如 何 使 用 -Photoeshop- 切 割 网 页 图 
卢 ， 然 后 用 Dreamweaver CS6 搭建 首页 的 效果 ， 完 
成 静态 部 分 的 设计 工作 ， 同 时 掌握 一 些 网 站 建设 的 基础 
操作 ,让 兼职 者 掌握 设计 网 页 的 第 一 步 。 
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2.1 网 页 设计 知识 


搭建 一 个 美观 实用 的 静态 网 页 需要 专业 的 美工 设计 师 来 设计 实现 ， 通 过 合理 的 功能 布局 
人 种 赏心悦目 的 感觉 ， 
从 而 提高 网 站 的 访问 量 。 在 所 有 的 页 面 设计 当中 ， 首页 的 设计 是 一 个 网 站 成 功 与 否 的 关键 ， 
人 一 页 就 已 经 对 用 户 的 站 挟 朋 一 个 整体 的 感 融 。 是 否 能 够 促使 浏览 者 继续 扣 击 
进入 ， 是 人 否 能 够 豚 引 浏览 者 留 在 站 操 上 ， 全 人 和 赁 首页 设计 的 “功力 ”"。 所 以 对 兼职 设计 师 而 
言 ， 首 页 的 设计 和 制作 是 绝对 要 重视 和 花心 思 的 ， 这 是 重点 ， 也 是 难点 。 接 下 来 就 做 一 些 相 
关 的 知识 介绍 。 


2.1.1 首页 的 功能 模块 


首页 的 功能 模块 是 指 用 户 需 要 在 首页 实现 的 主要 内 容 和 功能 。 一 般 的 站 点 都 需要 以 下 一 
网 站 名 称 ( Logo ) 
ee 


新 闻 四 

搜索 ( Search ) 

友情 链接 ( Links ) 

邮件 列表 ( Maillist ) 

计数 器 ( Count ) 

9 ) 版 权 ( Copyright ) 

选择 哪些 模块 ， 实 现 哪些 功能 ， 是 售 需 要 状 加 其 他 模块 ， 都 是 首页 设计 首 乞 需要 确定 的 。 


2.1.2 规划 和 首页 的 版 面 


在 功能 模块 确定 后 ， 开 始 设计 首页 的 版 面 。 就 像 搭 积 木 ， 每 个 模块 是 一 个 单位 积木 ， 如 
何 拼 搭 出 一 座 漂亮 的 房子 ， 就 看 个 人 的 创意 和 想象 力 了 。 设 计 版 面 的 最 好 方法 就 是 找 一 张 白 
纸 、 一 支 笔 ， 先 将 用 户 理想 中 的 草图 勾勒 出 来 ， 然 后 再 用 网 站 制作 软件 实现 。 

1. 设计 草案 

作为 一 个 网 站 的 首页 ， 主 要 由 导航 、Banner、 框 架 模块 、 版 权 及 企业 Logo 等 内 容 组 
成 ， 首 页 的 格式 设计 并 没有 固定 的 规则 和 模式 ， 主 要 是 由 设计 师 和 制作 者 来 共同 决定 的 ， 但 
是 上 面 提 到 的 功能 模块 却 是 一 个 都 不 能 少 。 这 里 要 注意 网 页 的 版 面 指 的 是 从 浏览 器 看 到 的 一 
个 完整 页 面 ( 可 以 包含 框架 和 层 )。 因 为 每 个 人 的 显示 器 分 辩 率 会 有 所 不 同 ， 所 以 同一 个 页 
面 可 能 出 现 640Xx 480 像素 、800X600 ee 1024X768 像素 等 不 同 分 辨 率 。 

草案 的 形成 决定 网 页 的 基本 面 狐 ， 它 类 似 一 个 设计 创意 ， 往 往来 自 于 一 些 现 有 设计 作 
SR 


2. 粗略 布局 

在 草案 的 基础 上 ， 将 需要 放置 的 功能 模块 安排 到 页 面 上 。 框 架 模块 在 第 1 章 已 提 到 过 ， 
主要 包含 主 菜单 、 栏 目 条 、 广 告 位 、 邮 件 列 表 、 计 数 器 等 。 注 意 这 里 必须 遵循 突出 重点 、 平 
衡 谐 调 的 原则 ， 将 网 站 标志 、 主 菜单 、 商 品目 录 等 最 重要 的 模块 放 在 最 显眼 、 最 突出 的 位 
置 ， 然 后 再 考虑 次 要 模块 的 排放 。 

ER 

将 粗略 布局 精细 化 、 具 体 化 。 在 布局 过 程 中 ， 可 以 遵循 的 原则 有 如 下 几 条 。 

(1 ) 平衡 : 指 画面 的 图 像 文字 的 视觉 分 量 在 左右 、 上 下 几 个 方位 基本 相等 ， 分 布 匀称 ， 
能 达到 安定 、 平 静 的 效果 。 Et 7 

( 2 ) 呼应 ， 指 在 不 平衡 的 布局 中 的 补救 措 
施 ， 使 一 种 元 素 同时 出 现在 不 同 的 地 方 ， 形 成 相 
互 的 联系 。 

(3 ) 对比， 所 谓 对 比 ， 就 是 利用 不 同 的 色彩 、 RA ~ 
线条 等 视觉 元 素 相互 并 置 对 比 ， 造 成 画面 的 多 种 变 。 9 pm 
化 ， 达 到 丰富 视觉 的 效果 。 了 四 | 和 一 

( 4 ) 朴 密 ; 朴 密 关系 本 是 绘画 的 概念 。 疏 ， 是 。 

指 画面 中 形式 元 素 稀 少 ( 甚至 空白 ) 的 部 分 ; 密 ， “一 
是 指 画面 中 形式 元 素 繁多 的 部 分 。 在 网 页 设计 中 就 
是 空白 的 处 理 运用 ， 太 满 、 太 密 、 太 平均 是 任何 版 ”二 二 





式 设计 的 大 忌 ， 适 当 的 玻 密 搭配 可 以 使 画面 产生 节 有 Ee 
奏 感 ， 体 现 出 网 站 的 格调 与 品位 。 三 

如 果 能 把 以 上 的 设计 原则 运用 到 页 面 布局 里 ， 一 要 一 
效果 就 会 大 不 一 样 。 例 如 网 页 的 白色 背景 太 虚 , 则 。 这 守 ，。 二 


可 以 加 些 色 块 ; 版 面 零散 ， 可 以 用 线条 和 符号 医 <=3 
联 ; 左面 文字 过 多 ， 石 面 则 可 以 捕 一 张 图 片 保 持平 nN TT mn 
衡 。 经 过 不 断 地 尝试 和 推 恋 ， 一 个 设计 方案 就 会 渐 
渐 完 善 起 来 。 

本 章 由 专业 的 设计 师 用 Photoshop 设计 的 首页 
效果 如 图 2-1 所 示 。 各 图 2-1 设计 的 首页 效果 


2.1.3 Banner 创作 技巧 


Banner 的 文字 不 能 太 多 ， 一 般 要 能 用 一 句 话 来 表达 ， 配 合 的 图 形 也 无 纳 太 繁杂 ， 文 字 尽 
量 使 用 黑体 等 粗壮 的 字体 ， 人 否则 在 视觉 上 很 容易 锌 网 站 其 他 内 容 渣 疫 。 图 形 尽 量 选 择 颜色 数 
少 ， 并 能 够 说 明 问 题 。 如 果 选 择 颜 色 很 复杂 的 物体 ， 则 要 考虑 一 下 在 低 颜 色 数 情况 下 ， 是 合 
会 有 明显 的 色 斑 。 

尽量 不 要 使 用 复杂 的 特技 图 形 效 果 ， 舍 则 会 大 大 增加 图 形 所 占据 的 颜色 数 ， 除 非 存 储 为 
JPG 静态 图 形 。Banner 的 外 围 边 框 最 好 是 深 色 的 ， 因 为 很 多 站 点 不 为 Banner 对 象 加 上 和 轮 
廊 ， 如 果 Banner 内 容 都 集中 在 中 央 ， 则 四 周 会 过 于 空白 而 融 于 页 面 底 色 ， 降 低 Banner 的 注 
目 率 。 
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2.2 ”网 页 定位 元 乘 表 格 


Dreamweaver CS6 中 的 表格 是 页 面 布局 中 极为 音 用 的 设计 工具 。 在 设计 页 面 时 ， 往 往 要 
二 利用 表格 来 定位 页 面 元素 。 使 用 表格 可 以 实现 导入 表格 数据 、 设 计 页 面 分 栏 、 定 位 页 面 上 的 
~ | 文本 和 图 像 等 操作 。 


2.2.1 表格 的 基础 知识 


表格 基本 上 是 随 看 用 户 添 加 正文 或 图 像 而 扩展 的 。 表 格 由 三 个 主要 元 素 构 成 : 行 、 列 和 

单元 格 ， 如 图 2-2 所 示 。 行 从 二 到 石 横 过 表格 ， 而 列 则 是 上 下 走 癌 ， 单 元 格 是 行 和 列 的 交界 

部 分 ， 它 是 用 户 输 入 信息 的 地 方 ， 单 元 格 会 自动 扩展 到 与 输入 的 信息 相 适 应 的 大 小 。 如 果 用 
虹 户 已 启动 了 表格 边框 ， 则 浏览 辟 中 会 显示 表格 边框 和 其 中 包含 的 所 有 单元 格 。 



































国 图 2-2 表格 格式 


\TH /一 大 全 


有 在 Dreamweaver CS6【 文档 】 窗 口中， 经 常 单 击 按 乌 代码 ， 打 开 HTML 代码 进行 管理 ， 
因此 也 要 掌握 表格 在 代码 下 的 编辑 控制 方法 。 用 《<table> 和 table> 标 记分 别 定 义 一 个 表格 的 
开始 和 结束 ， 如 图 2-3 所 示 。 表 格 的 标题 和 内 容 包 含 在 这 两 个 标记 之 间 。 表 格 标题 由 
<caption> 和 </caption> 表 示 ， 表 格 行 由 <tr> 和 tr? 标记 表示 ， 而 表格 内 容 则 由 th> 和 人 th> 
标记 以 及 《<td> 和 Wtd> 标 记 表 示 。 


| Dw 谈 昨 让) 而 辑 和 查看 人 业 MtI) 幅 认 人) 由 哉 i 十 训 从 后 点 必 ) 窗口 和 i) 填 婴 wh | 
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图 图 2-3 表格 的 代码 
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<table> 市 有 很 多 属性 ， 现 在 将 一 些 最 为 单 用 的 属性 介绍 如 下 。 

1 ) Align: 用 于 决定 表格 在 文档 中 的 对 齐 方式 ， 其 可 选 的 属性 值 为 left ( 左 对 齐 )、 
center ( 居中 对 齐 ) 和 right ( 右 对 齐 ) 等 。 

2 ) Width: 用 于 确定 表格 在 浏览 器 中 的 宽度 ， 其 取 值 可 以 是 像素 值 ， 以 设置 表格 的 绝对 
宽度 ， 也 可 以 是 相对 于 浏览 姻 窗 口 席 度 的 百分比 值 ， 用 于 设置 表格 的 相对 宽度 。 如 果 不 设置 
该 属性 ， 则 表格 的 宽度 由 用 户 的 浏览 器 根据 表格 中 各 项 设置 自行 确定 。 

3 ) Height: 用 于 确定 表格 在 浏览 强 中 的 高 度 ， 其 取 值 可 以 是 像素 值 ， 以 设置 表格 的 绝 
对 高 度 ， 也 可 以 是 相对 于 浏览 器 窗口 高 度 的 百分比 值 ， 用 于 设置 表格 的 相对 高 度 。 如 果 不 设 
置 该 属性 ， 则 表格 的 高 度 由 用 户 的 浏览 器 根据 表格 中 各 项 设置 自行 确定 。 

4 ) Dir， 拍 述 表 格 的 方 喇 ， 其 取 值 是 一 个 用 于 说 明 方 富 的 字符 串 。 上 默认 状态 下 ， 表 格 的 
方 品 是 从 左 至 右 的 ， 这 时 表格 的 项 新 是 第 0 行 ， 左 靖 是 第 0 列 。 如 果 将 Dir 属性 值 指定 为 
“RTL”， 则 将 表格 的 方向 设置 为 从 石 至 左 ， 这 时 表格 的 顶端 同样 是 第 0 行 ， 但 是 右 端 才 是 第 0 
列 。 设 置 了 表格 的 方向 之 后 ， 会 影响 表格 中 所 有 单元 格 中 文本 的 方向 ， 也 可 以 针对 特定 的 单 
元 格 ， 设 置 其 方向 属性 。 


2.2.2 在 网 页 中 编辑 表格 


下 面 介绍 如 何在 Dreamweaver CS6【 文档 】 窗 口中 编辑 表格 。 

1. 插入 表格 

(1 ) 任 选 以 下 操作 之 一 选择 创建 表格 命令 。 

@ 将 鼠标 指针 移 到 页 面 上 相应 位 置 ， 单 击 【 插 入 】 面 板 中 【 插入 表格 】 按 钮 有 表格 。 
@ 执行 菜单 栏 上 的 【 插入】 一 【表格 】 命 令 。 

@ 将 【插入 表格 】 按 钮 国 素 属 从 【 插入】 面板 拖 动 到 页 面相 应 位 置 。 

打开 如 图 2-4 所 示 的 【 表格 】 对 话 框 ， 然 后 进行 表格 的 参数 设置 。 


行 数 : 列 : 
未 由 宽度 : | 
边框 粗细 : | “| 你 索 

单元 格 边 距 : | | 国 
单元 格 间距 : | | 国 


辅助 功能 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 


| | 


标题 : 
摘要 : 





2-4 【表格 】 对 话 框 


19 


CO 
CU) 
BD 
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NL_ 
dd 此 对 话 框 保留 了 最 近 一 次 插入 的 表格 的 相关 设置 。 
注意 


(2) 在 【 行 数 】 文 本 框 中 ， 输 入 需要 插入 表格 的 行 数 。 
(3) 在 【 列 数 】 文 本 框 中 ， 输 入 需要 插入 表格 的 列 数 。 
(4) 在 【表格 宽度 】 文 本 框 中 ， 输 入 以 像素 为 单位 或 以 浏览 器 窗口 百分比 为 单位 的 表 


/ 格 宽度 。 默 认 的 表格 大 小 设置 为 占据 浏览 颖 窗口 的 75%。 通 过 在 【 表格 宽度 】 文 本 框 中 改 


变数 值 ， 就 可 以 变更 这 个 百分比 数值 。 在 添加 文本 或 图 像 时 ， 表 格 会 保持 这 个 比例 。 如 果 
想 以 一 个 绝对 像素 数值 作为 表格 宽度 ， 而 不 是 以 相对 百分比 ， 可 以 在 【 表格 宽度 ] 文本 框 
中 输入 像素 数目 并 单 击 【 表格 宽度 】 文 本 框 右 侧 的 三 角 按 钮 网 ， 打 开 下 拉 菜 单 ， 选 择 【 像 
素 】 选项。 

(5 ) 在 【边框 粗细 |】 文本 框 中 输入 表格 的 边框 宽度 。 当 不 希望 显示 边框 时 ， 则 输入 “0”。 
(6) 在 【单元 格 边 距 】 文 本 框 中 输入 单元 格 中 的 内 容 与 单元 格 边界 之 间 的 距离 。 
(7 ) 在 【单元 格 间距 】 文 本 框 中 输入 单元 格 之 间 的 距离 。 
( 8 ) 在 【标题 ] 文本 框 中 输入 与 表格 相关 的 说 明 或 者 标题 。 
(9 ) 在 “标题 列表 项 ”中 ， 可 以 选择 表格 的 说 明 在 表格 中 的 位 置 ， 主 要 有 【无 】【 左 外 
【 顶部 人 【两 者 】 几 个 选项 。 

( 10 ) 在 【摘要 】 文 本 框 中 输入 表格 的 摘要 。 

(11 ) 单 击 【 确定 】 按 钮 ， 完 成 表格 的 创建 。 

实例 制作 图 2-5 显示 了 3 个 表格 。 顶 端的 表格 一 的 宽度 被 设置 为 75% 的 默认 表格 样 
式 ; 中 间 的 表格 二 的 宽度 被 设置 为 100%， 占 据 了 浏览 器 窗口 的 整个 宽度 ;第 三 个 表格 三 的 
宽度 被 设置 为 400 像素 。 


| DW 记 作 ii) 请 组 人) 查看 ti 烽 A.(I) 艇 识 ) 罩 式 人 0) 击 委 代 】 站 点 如) 生日 得] 帮助 人 0 翅 计 图 “| SEE 司 


有 村 





加 
攻 确 | 是 条 | 吴 t | | 敲 时 代 吧 户 才 计时 册 图 | 梓 查 区) 局 标明 泡 村 是 广 档 
问 六 陆地 : 赎 . 


ww 标题 人 | 
芒 ss 带 让 | 需 was ie 旧 巾 属 ) 
四 徊 贩 二 .J | 避 责 本 


国 图 2-5 表格 不 同 宽度 的 效果 图 


2. 搬入 对 象 
在 表格 单元 格 中 可 以 插入 文本 、 图 片 等 其 他 内 容 。 下 面具 体 讲述 怎样 在 表格 中 插入 这 些 
内 容 。 
将 鼠标 指针 移 到 一 个 表格 单元 格 中 ， 然 后 任 选 以 下 操作 之 一 。 
@ 直接 输入 文本 。 当 输入 的 文本 长 度 超 过 表格 单元 格 宽 上 度 时 ， 表 格 单元 格 会 自动 调整 
其 


宽度 。 
@ 将 Dreamweaver CS6 或 其 他 文本 编辑 尼 中 的 文本 复制 并 粕 由 到 表格 单元 格 中 。 ew 
在 表格 中 插入 图 像 的 操作 步骤 如 下 。 Wi/ 
(1 ) 将 鼠标 指针 移 到 需要 插入 图 像 的 单元 格 中 。 ew 
(2) 在 【插入 】 和 面板 中 单 击 【 图 像 】 按 钮 图 * 图 仿 ， 或 执行 菜单 栏 上 的 【插入 】 一 [【 | 
1 


) 在 打开 的 【选择 图 像 源 文件 】 对 话 框 中 选中 要 插入 的 图 像 ， 单 击 【 确定 】 按 钮 

0 

3. 选 定 表格 

在 创建 表格 和 输入 表格 内 容 之 后 ， 有 时 需要 修改 表格 中 的 数据 ， 这 就 要 对 表格 元 素 进 
行 选 择 ， 以 便 做 下 一 步 的 操作 。 可 以 选择 整个 表格 ， 也 可 以 选择 一 行 、 一 列 或 多 行 、 多 
列 ， 还 可 以 选择 表格 中 连续 或 不 连续 的 多 个 单元 格 。 选 定 表格 或 单元 格 之 后 ， 可 以 修改 选 
定单 元 格 及 其 所 包含 的 文本 ， 也 可 以 复制 和 粘贴 连续 的 单元 格 ， 但 不 能 复制 或 粘贴 非 连续 
单元 格 。 

2.2.3 ”表格 属性 设置 


本 节 将 介绍 如 何 通过 设置 表格 的 属 性 和 设计 表格 ， 来 改变 表格 的 外 观 。 要 设置 整个 表 
格 的 属性 ， 首 先 要 选 定 整个 表格 ， 然 后 利用 【 属性 检查 器 】 来 设置 表格 的 属性 。 执 行 菜 
ee 
选 定 表 格 后 ， 如 果 【 属性 检查 器 】 是 打开 的 ， ee 2-6 中 所 示 的 表格 属性 ， 售 则 
用 户 可 以 通过 执行 菜单 栏 上 的 【 窗口 】 一 【 属性】 命令 ,打开 【属性 检查 器 来 查看 表格 
属性 。 


面 二 
[| 
上 


到 表格 pp ETA EPE AN ET 
| 图 到 Ca | 间距 好) | “| 过 框 史 | | 


mm 9 
Ts 


本 图 2-6 表格 【 属性 检查 器 】 


. 性 
) 在 【属性 检查 器 】 左 边 的 【表格 】 文 本 框 中 ， 可 以 设置 表格 的 名 称 。 
) 在 【 行 】 和 【 列 】 文 本 框 中 ， 输 入 表格 的 行 数 和 列 数 。 
) 在 【 宽 】 文 本 框 中 ， 输 入 表示 表格 宽度 的 数值 ， 并 以 【 像素 】 或 浏览 器 窗口 的 百 分 
比 为 单位 。 
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了 7 之 兼 职 指导 : 
表格 的 高 度 一 般 不 需要 指定 。 


( 4) 使 用 【 对齐】 下拉 列表 可 以 设置 该 表格 与 同一 段落 中 的 其 他 元 素 ( 如 文本 或 图 像 ) 
的 对 齐 方式 。 单 击 右边 的 三 角 按 钮 同 ， 弹 出 【 对齐 】 下 拉 菜 单 。 选 择 【 左 对 齐 】 选 项 使 表格 
与 其 他 元 素 左 对 齐 ,【 右 对 齐 】 选 项 使 表格 与 其 他 元 素 右 对 齐 ,【 居中 对 齐 】 选 项 使 表格 相对 
于 其 他 元 素 居中 对 齐 。 也 可 以 选择 浏览 器 的 默认 对 齐 方式 【 默认】 选项 。 

2. 设置 单元 格格 式 

(1 ) 在 单元 格 【 填充 】 文 本 框 中 ， 指 定单 元 格 内 容 与 单元 格 边线 之 间 的 像素 值 。 

(2 ) 在 单元 格 【 间距 】 文 本 框 中 ， 指 定 每 个 表格 单元 之 间 的 像素 值 。 


六 7 兼职 指导 : 

当 单 元 格 间 距 和 单元 格 填充 没有 指定 值 时 ，Netscape Navigator、Microsoft Internet 
Explorer 和 Dreamweaver CS6 都 按 单元 格 间 距 设 置 为 2 像素 和 单元 格 填充 设置 为 1 像素 来 显 
示 表 格 。 


3. 设置 表格 的 边框 

(1 ) 在 【边框 ] 文 本 框 中 ， 可 以 设置 表格 的 边框 宽度 值 ， 单 位 为 像素 。 如 果 将 边框 宽度 
设置 为 0， 则 不 显示 边框 。 为 了 方便 操作 ， 在 默认 状态 下 ， 在 【文档 】 窗 口中 将 显示 表格 的 
虚拟 边框 ， 如 图 2-7 所 示 。 

( 2 ) 用 户 也 可 以 设置 是 否 显示 表格 的 虚拟 边框 ， 方 法 是 执行 菜单 栏 上 的 【查看 一 【可 
视 化 助理 ] 命令 ， 从 打开 的 子 菜单 中 通过 执行 取消 对 【 表格 边框 命令 的 选择 ， 此 时 表格 在 
【 文档 】 窗口 中 显示 效果 如 图 2-8 所 示 。 


: “ 惟 者 证 号 : 肆 程 信友 :所 者 :: 违 缉 : 成绩: 淮 老 证 号 ”课程 代码 缺 考 违纪 成 绩 
:10604200001 :186 0 i10604200001 186 0 0 47 
‘10804200001 dg 0 16 10604200001 149 0 0 了 
10604200002 dd 10604200002 149 0 0 37 
:10604200002 56 0 0 10804200002 55 0 0 14 
10604200002 8 i 10604200002 98 0 0 26 
图 2-7 显示 表格 的 虚拟 边框 图 2-8 不 显示 表格 的 虚拟 边框 


4. 取消 显示 表格 宽度 

在 Dreamweaver CS6 中 ， 当 选中 一 个 激活 的 表格 时 ， 默 认 情 况 下 ， 在 【文档 】 窗 口中 显 
示 了 表格 的 宽度 ， 如 图 2-9 所 示 。 可 以 选择 【 查看 】 一 【可 视 化 助理 】 命 令 ， 在 打开 的 子 菜 
单 中 取消 对 【 表格 宽度 】 命 令 的 选择 ， 即 可 取消 显示 表格 的 宽度 。 


dr” 

















2-9 ”显示 表格 的 宽度 


2.2.4 调整 表格 的 大 小 


使 用 Dreamweaver CS6 可 以 轻松 改变 整个 表格 的 大 小 或 单独 调整 某 个 单元 格 的 大 小 。 在 
改变 整个 表格 大 小 的 同时 ， 表 格 中 的 所 有 单元 格 大 小 也 会 做 相应 的 调整 。 改 变 整 个 表格 尺寸 
的 操作 步骤 如 下 。 

(1 ) 选中 需要 修改 的 表格 。 

( 2 ) 横向 或 纵向 拖 动 控制 柄 以 调整 表格 的 大 小 。 


7 兼职 指导 : 
拖 动 表 格 边 角 上 的 控制 柄 ， 可 以 同时 调整 两 边 的 尺度 。 选 中 表格 后 ， 通 过 在 【属性 检查 
器 〗 中 的 【宽度 】 文 本 框 中 直接 输入 新 的 数值 ， 也 可 以 改变 表格 大 小 


改变 行 或 列 六 小 时 ， 如 果 要 改变 行 高 ， 则 拖 动 底 站 行 边框 ;如果 要 改变 列席 ， 则 拖 动 石 
侧 列 边框 。 还 可 以 使 用 【 属性 检查 颖 】 指 定 列 宛 ， 操 作 步 骤 如 下 。 

(1 ) 单 击 列 中 的 任意 单元 格 或 选 正 整 列 。 

(2 ) 如 果 【 属性 检查 颖 】 疫 有 打开 ， 执 行 菜单 栏 【 窗口 ] 一 【 属性】 命令 打开 【属性 检 


(3) 在 【 宽度】 文本 框 中 ， 选 择 以 下 操作 之 一 。 

@ 直接 输入 一 个 数值 设置 列席 ， 单 位 为 像素 。 

@ 输入 一 个 以 下 分 号 (% ) 结尾 的 数值 ， 将 列 宽 设 置 为 表格 宽度 的 百分比 。 

保持 该 文本 框 为 空 ( 即 默 认 设 置 )， 人 允许 浏览 璐 和 Dreamweaver CS6 根据 单元 格 内 容 和 
其 他 列席 决定 合适 的 列 宽 。 一 般 而 言 ， 将 根据 最 长 的 行 或 最 宽 的 图 像 来 确定 位 置 。 这 就 是 为 
什么 在 向 表格 中 添加 内 容 时 ， 有 些 列 宽 变 得 比 其 他 列 大 的 原因 。 

设置 表格 列 宽 和 行 高 最 简单 直观 的 方法 就 是 直接 拖 动 表格 的 边框 ， 其 单位 是 像素 或 百 分 
比 。 但 如 果 对 拖 动 表格 边框 取得 的 结果 感到 不 满意 时 ， 可 以 清除 列 宽 和 行 高 并 重新 设置 。 在 
选中 表格 后 执行 菜单 栏 【 修改 】 一 【表格 】 一 【清除 单元 格 高 度 命令 或 【 修改】 一 【 表 


格 】 一 【 清除 单元 格 宽度 ] 命令 ， 就 可 以 清除 行 高 或 列 宽 。 
2.2.5 添加 /删除 行 或 列 


在 有 些 情 况 下 ， 用 户 需要 对 行 或 列 进行 删改 ， 使 用 【 修改】 一 【表格 】 子 菜单 中 的 命令 
或 右键 快捷 菜单 中 的 命令 均 可 以 实现 对 表格 的 行 或 列 进行 增加 与 删除 的 操作 。 

增加 行 或 列 的 操作 步骤 如 下 。 

(1 ) 在 表格 中 选择 需要 插入 行 ( 列 ) 的 地 方 。 

(2 ) 任 选 以 下 操作 之 一 。 

@ 要 添加 一 行 ， 执 行 菜 单 栏 【修改 】 一 【表格 】 一 【 皇 入 行 】 命令， 或 单 击 鼠标 右 
键 ， 在 快捷 菜单 中 选择 【表格 】 一 【插入 行 】 命 令 。 

@ 要 沐 加 一 列 ， 执 行 菜 单 栏 【修改 】 一 【表格 】 一 【插入 列 】 命令， 或 单 击 鼠标 右 
键 ， 在 快捷 菜单 中 选择 【表格 】 一 【插入 列 】 命 令 。 

®@ 要 同时 添加 行 与 列 ， 执 行 菜单 栏 【 修 改 】 一 【表格 】 一 【 捅 入 行 或 列 】 命令 ， 或 单 
击 鼠 标 右 键 ， 在 快捷 菜单 中 选择 【 表格 】 一 【 插入 行 或 列 】 售 令 。 


口 


(3 ) 如 果 选 择 了 【 插入 行 或 列 】 操作， 需要 在 打开 的 【插入 行 或 列 】 对 话 框 中 输入 准备 
添加 的 行 或 列 ， 【 行 数 】 或 【 列 数 】 本 全 
险 入 要 插入 行 列 ) 数 ， 并 指定 新 的 行 ( 列 ) 是 
出 现在 选中 行 列 )【 所 选 之 上 】 还 是 ee 


下 】， 如 图 2-10 所 示 。 ee Ca 





该 对 话 框 。 es 
0 又 如 下 。 
) 在 表格 中 选择 需要 删除 的 行 ( 列 )。 
ER 
@ 要 删除 行 ， 执 行 菜单 栏 【 修改 】 一 【表格 ] 一 【 删除 行 】 命令 ， 或 选择 快捷 菜单 上 
的 【表格 】 一 【 删除 行 ] 命令 。 
e@ 要 删除 列 ， 执 行 菜单 栏 【 修改 ] 一 【表格 】 一 【 删除 列 】 命令， 或 选择 快捷 菜单 上 
的 【表格 】 一 【 删除 列 】 命 令 。 
e@ 要 同时 删除 行 与 列 ， 执 行 菜单 栏 【 修改 ] 一 【表格 】 一 【 删除 行 或 列 】 命令 ， 或 选 
择 快 捷 菜 单 上 的 【 表格 】 一 【 删除 行 或 列 ] 命令 。 
还 可 以 通过 在 表格 【 属性 检查 器 】 中 改变 行列 值 ， 来 实现 在 表格 中 添 除 ) 行 或 列 
操作 。 它 的 操作 步骤 如 下 。 
/ | 选 定 整个 表格 。 
) 在 【 属性 检查 器 】 中 ， 选 择 以 下 操作 之 一 。 
ee 于 或 列 的 值 以 添加 行 或 列 。 
@ 减少 行 或 列 的 值 以 删除 行 或 列 。 


YY 兼 职 指 导 : 
Dreamweaver CS6 从 表格 的 底 端 增加 或 删除 行 ， 从 表格 的 右 端 增加 或 删除 列 ， 如 果 删 除 
的 行 或 列 中 包含 有 数据 ，Dreamweaver CS6 不 会 弹出 删除 警告 。 


三。 “226 合并 及 拆 分 单元 格 


使 用 【 属 pt 或 【修改 】 一 【表格 】 子 菜单 中 的 命令 ， 可 以 拆 分 和 合并 单元 格 。 
可 以 合并 任意 多 个 连续 的 单元 格 ( 只 要 选中 的 区 域 是 矩形 )， 以 产生 一 个 跨越 多 行 或 多 列 的 
单元 格 。 i dy J 或 任意 多 列 ， 不 论 此 单元 格 以 前 是 否 被 合并 
过 。Dreamweaver CS6 将 自动 根据 所 进行 的 操作 重 


组 表格 。 一 
在 如 图 2-11 所 示 的 示例 中 ， 右 下 角 的 两 个 单 和 


2-10 【 插入 行 或 列 】 对 话 框 


元 格 已 经 被 合并 ， 因 此 它们 的 高 度 占 了 两 行 。 [10604200002 ||149 0 0 Br 
I 合并 单元 格 1 1080d200002 55 一 男 晴 
i os04200002 8 9 
合并 两 个 或 更 多 单元 格 的 操作 步骤 如 下 。 面 是 





1 ) 选中 想 要 合并 的 单元 格 ， 相 前 切 、 复 制 
单元 格 一 样 ， 先 中 的 单元 格 必须 是 相 人 的 。 


图 2-11 合并 了 两 个 单元 格 的 表格 
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(2 ) 执行 莱 单 栏 【 修 改 】 一 【表格 ] 一 【 合并 单元 格 】 命 令 ， 或 单 击 【 属性 检查 器 】 上 
的 【 合并 单元 格 】 按 钮 到 ， 独 立 的 单元 格 中 的 内 容 会 被 同时 放 在 已 合并 的 单元 格 中 。 


27 兼职 指导 : 
先 选 中 多 个 相连 的 单元 格 ， 再 按 【M1] 快捷 键 就 可 以 合并 选中 的 单元 格 。 


2. 拆 分 单元 格 

拆 分 单元 格 的 操作 步骤 如 下 。 

( 1) 将 鼠标 指针 放 在 表格 单元 格 中 或 选中 一 个 表格 单元 格 。 

( 2 ) 执行 菜单 栏 【修改 】 一 【表格 】 一 【 拆 分 单元 格 】 命令， 或 单 击 【 属性 检查 器 】 上 
的 【 拆 分 单元 格 】 按钮 莽 。 

(3 ) 在 【 拆 分 单元 格 】 对 话 框 中 ， 选 择 是 拆 分 为 【 行 】 还 是 【 列 】 并 设置 行 数 或 列 数 。 

( 4) 设置 完成 后 ， 单 击 【 确定 】 按钮 ， 关闭 该 对 话 框 。 


2.3 网 页 的 超 链接 


超 链 接 好 比 是 网 站 页 面 间 的 一 条 枢纽 ， 它 能 让 网 站 所 有 的 页 面 有 机 地 连接 起 来 ， 浏 览 
只 需 用 鼠标 单 击 超级 链接 就 可 以 实现 页 面 间 的 切换 。 在 本 站 中 将 介绍 超级 链接 的 一 些 基 础 
知识 。 


2.3.1 超 链接 基本 概念 


利用 超级 链接 可 以 实现 在 页 看 间 或 文档 内 部 的 跑 苇 。 超 级 链接 是 由 两 个 亲 护 相 一 个 方 同 
构成 的 。 在 一 般 情 况 下 ， 将 开始 位 置 的 疹 氮 叫做 产 问 反 ， 将 目标 位 置 的 病 扣 叫做 目标 站 氮 ， 
链接 就 是 由 产 疹 点 同 目 标 冰 氮 的 一 种 路 转 。 目 标 站 所 可 以 是 任意 的 网 络 资 产 ， 可 以 是 一 个 网 
页 、 一 幅 图 像 或 一 段 程序 等 。 

1 .按照 着 端 氮 区 分 链接 

按照 产 病 点 的 不 同 ， 可 以 将 超级 链接 分 为 超 文 本 和 超 链 接 网 种 。 

超 文本 就 是 利用 文本 创建 的 超级 链接 ， 在 这 种 链接 中 ， 链 接 的 产 病 氮 是 文本 ， 超 文本 一 
般 显示 为 下 面市 有 下 辆 线 的 文字 ， 通 党 为 北 色 ， 图 2-12 显示 了 超 文本 的 外 观 。 

超级 链接 是 利用 除 文本 之 外 的 其 他 对 象 所 创建 的 链接 ， 在 这 种 链接 中 ， 源 端 氮 是 除了 文 
本 之 外 的 其 他 对 象 ， 如 可 以 是 一 幅 图 像 ， 或 者 是 一 个 其 他 类 型 的 对 象 等 。 


7 兼职 指导 : 

这 里 主要 介绍 如 何在 文档 中 建立 超 文本 ， 相 关 的 实际 操作 也 同样 适用 于 其 他 类 型 的 超 链 
接 。 因 此 ， 在 介绍 后 面 的 相关 知识 时 ， 如 果 没有 特别 指出 ， 则 仅仅 使 用 “超级 链接 ”这 个 
词 ， 而 不 区 分 “ 超 文本 ”和 “ 超 链接 ”这 两 个 概念 。 


2. 按照 目标 端点 区 分 链接 
超级 链接 目标 端点 可 以 是 内 部 链接 、 外 部 链接 、 电 子 邮件 链接 及 局 部 链接 。 
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| F:\ 机 工 训 嵌 体 h\dreamweavercs5\dwpan\sourceh\chap04\sitehabout. htm* 


联系 方式 : : 。 昌 欢迎 您 于 州 技 习 计算 机 科技 有 限 公司 ， 我 们 真诚 的 创意 服务 让 您 及 您 的 全 
业 劳 联系 咨询 电话 :020-87221483 机 

， 询 传真 :020- # : ” 技 飞 计算 机 科技 有 限 公司 与 中 国电 脑 教学 网 ( 北京 视点 科技 ) 强 强 联手 ， 江 
业务 联 系 尖 则 传真 :020-87221482 ,北京 旦 人 资深 11 由 由 计策， 经 过 多 年 的 呈 究 ， 开 发 J- 礁 售 合 我 们 中 国电 肌 委 好 老 
E-Mail: allyrhuBGhotmail. com 5 断 追 求 上 进 ， 及 利用 空余 时 间 充电 的 各行 各 业 精 英 们 的 最 佳 在 线 措 训 机 构 。 
a 


求 
NSN Nesseneer: allyrhudehotmal : 
1. com [ally) 内 
可 。 


腾讯 99 在 线 服务 :421344969 ( 技 : : 
飞 科 技 ) 


用 实例 入 手 ， 采用 网 络 在 线 教学 的 方式 ， 具 动易 学 ， 让 您 在 任何 时 间 , 地 点 ， 


提供 : 


; :各 类 在 线 培训 课程 


;计算 机 网 络 教学 





:创意 求 新 、 服 务 为 实 4 


Itr> <td> <table> <tr> <td> <strone> <a> ER lio00% v| 回转 ul 696 x 448v 74 下 2 秒 简体 中 交 (G6B2312) 





三 图 2-12 超 文本 外 观 


根据 目标 病 点 的 不 同 ， 链 接 也 可 以 分 为 以 下 几 种 情 痪 。 

@ 内 部 链接 : 这 种 链接 的 目标 端点 是 本 站 氮 中 的 其 他 文档 。 使 用 这 种 链接 ， 可 以 号 转 
到 本 站 点 其 他 页 面 上 。 

@ 外 部 链接 : 这 种 链接 的 目标 问 氮 是 本 站 氮 之 外 的 站 氮 或 文档 。 使 用 这 种 链接 ， 可 以 
跳 转 到 其 他 网 站 上 。 

@ 电子 邮件 链接 : 当 网 页 的 浏览 者 单 击 这 种 链接 ， 可 以 局 动 电子 邮件 程序 ， 让 浏览 者 
书写 邮件 ， 并 发 送 到 指定 的 地 址 。 

@ 局 部 链接 : 这 种 链接 的 目标 辣 护 是 文档 中 命名 的 饥 。 使 用 这 种 链接 ， 可 以 跳 转 到 当 
前 文档 中 的 某 一 指定 位 置 上 ， 也 可 以 跳 转 到 其 他 文档 中 的 有 一 指定 位 置 上 。 


2.3.2 ”链接 的 路 径 


在 上 一 小 节 中 ， 介 绍 了 有 关 和 链接 的 源 端点 和 目标 端点 的 知识 ， 仅 仅 知 道 有 关 链 接 的 基础 
知识 是 不 够 的 ， 还 需要 了 解 链接 路 径 的 相关 知识 。 

链接 路 径 主 要 有 3 种 类 型 : 绝对 路 径 、 相 对 路 径 及 和 根 上 目录 相对 的 路 径 。 下 面 对 这 3 种 
有 关 和 链接 路 径 的 知识 加 以 详细 介绍 。 

1 . 绝对 路 径 

绝对 路 径 是 指 包 含 服 务 器 协议 ( 在 网 页 上 通 音 是 http:// 或 化 p:// ) 的 完全 路 径 。 绝 对 路 
径 表 示 的 是 精确 位 置 ， 而 不 用 考虑 源 文档 的 位 置 。 但 是 如 果 目 标 文档 被 移动 ， 超 链接 则 无 
效 。 在 本 地 规划 了 站 点 以 后 ， 如 果 需 要 链接 到 站 点 以 外 的 文件 时 ， 必 须 使 用 绝对 路 径 。 

2 . 相对 路 径 

相对 路 径 是 指 和 当前 文档 所 在 的 文件 夹 相 对 的 路 径 。 例 如 文档 test.swf 在 文件 夹 Flash 
中 ， 它 指定 的 就 是 当前 文件 夹 内 Flash 的 文档 ，.../test.swf 指定 的 是 当前 文件 夹 上 级 目录 中 
的 文档 ， 而 /test/test.swf 指定 的 是 Flash 文件 夹 下 test 文件 夹 中 的 test.swf 文档 。 和 文档 相 
对 的 路 径 通 党 是 最 简单 的 路 人 径 ， 可 以 用 来 链接 与 当前 文档 在 同一 文件 夹 中 的 文件 。 


了 7 兼职 指导 ; 

在 建立 和 文档 相对 的 路 径 之 前 ， 必 须 保存 新 文件 ， 因 为 在 没有 定义 文件 起 始点 的 情况 
下 ， 和 文档 相对 的 路 径 是 无 效 的 。 在 文档 保存 之 前 ，Dreamweaver CS6 会 自动 使 用 以 File:// 
开头 的 绝对 路 径 。 


3. 和 根 目 录 祖 对 的 路 径 

和 根 目录 相对 的 路 径 是 指 放置 在 站 总 文件 夹 目录 下 的 任何 文件 的 指向 路 径 。 站 点 上 所 有 
可 以 公开 的 文件 都 存放 在 站 点 的 根 目 录 下 。 和 根 目 录 相 对 的 路 径 可 以 使 用 笠 线 告诉 服务 器 从 
根 目 录 开 始 。 例 如 /Dreamweaver /index.html 将 链接 到 站 点 根 目录 Dreamweaver 文件 夹 的 
index.html 文件 。 如 果 要 在 内 容 经 常 被 移动 的 环境 中 建立 超 链 接 ， 那 么 推荐 优先 使 用 和 根 目 
录 相 对 的 路 径 。 在 使 用 和 根 目 录 相 对 的 路 径 时 ， 包 合 起 链接 的 文档 在 站 点 内 移动 ， 起 链接 不 
会 中 断 。 但 是 和 根 目录 相对 的 路 径 不 适合 在 本 地 查看 站 点 ， 在 这 种 情况 下 ， 可 以 使 用 和 文档 
相对 的 路 径 。 


7 之 兼 职 指 导 : 

当 在 浏览 器 中 按照 本 地 方式 预览 文件 时 ， 和 根 目 录 相 对 的 路 径 所 链接 的 内 容 不 会 出 现 . 
这 是 因为 浏览 器 不 能 像 服务 器 那样 识别 站 点 根 目录 。 要 预览 和 根 目录 相对 的 路 径 所 链接 的 内 
容 ， 必 须 将 文件 放置 到 远程 服务 器 ， 并 从 那里 进行 查看 。 


2.3.3 ”链接 的 颜色 


对 于 超 文 本 类 型 的 链接 来 说， 链接 文字 有 如 下 几 种 颜色 状态 : 未 访问 的 链接 的 文本 颜 
色 、 正 在 访问 的 链接 的 文本 颜色 相 已 访问 的 链接 的 文本 颜色 。 

默认 状态 下 ， 链 接 文 字 的 几 种 颜色 状态 是 由 浏览 强 决 定 的 。 多 数 济 虹 器 将 未 访问 的 链接 
文本 颜色 显示 为 准 色 。 可 以 通过 人 极 置 文档 的 页 面 属性 或 设置 选择 如 CSS 样式 的 方式 来 控制 链 
接 文 本 的 颜色 。 

1. 通过 设置 文档 的 页 面 属性 来 控制 链接 文本 的 颜色 

下 面 通过 一 个 简单 的 实例 来 启明 如 何 通 过 设置 文档 的 页 面 属性 来 控制 链 搁 文 本 的 颜色 。 
假设 需要 将 未 访问 的 链接 的 文本 颜色 设置 为 蓝 色 ， 已 访问 的 链接 的 文本 颜色 设置 为 红色 ， 正 
在 访问 的 链接 的 文本 颜色 设置 为 绿色 。 实 现 的 方法 和 步骤 如 下 。 

(1 ) 启动 Dreamweaver CS6， 新 建 一 个 文档 。 

( 2 ) 执行 菜单 栏 上 的 【修改 】 一 【页 和 面 属性 】 命 令 ， 打 开 【 页 面 属性 】 对 话 框 ， 按 如 
2 一 13 所 示 进 行 姑 置 。 

(3 ) 在 【分 类 】 列 表 框 中 单 击 【链接 】 选 项 ， 然 后 单 击 【 链接 颜色 】 选 项 后 面 的 颜色 选 
择 框 右 ， 从 打开 的 【 颜色 选择 器 】 中 选择 蓝 色 ， 这 样 就 可 以 将 未 访问 链接 的 文本 颜色 设置 为 
监 色 。 

(4) 单 击 【已 访问 链接 】 选 项 后 面 的 颜色 选择 框 癌 ， 从 打开 的 【 颜色 选择 器 】 中 选择 红 
色 ， 这 样 就 可 以 将 已 访问 链接 的 文本 颜色 设置 为 红色 。 

( 5) 单 击 【活动 链接 】 选 项 后 面 的 颜色 选择 框 丫 ， 从 打开 的 【 颜色 选择 恬 】 中 选择 绿 
色 ， 这 样 就 可 以 将 正在 访问 的 链接 的 文本 颜色 设置 为 绿色 。 
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分 类 链接 (C55) 
外 观 史记 链接 字体 CD): |5 同 页 面 字体 
得 持 








让 靖 (CSS) 大 小 (5): |12 Ylpx v| 
标题 /编码 
跟 路 图 像 





链接 颜色 LL): 莫 | | 关 33 。 ”| 变换 图 像 链 接 (8): 天 #686 | 
已 访问 链接 0 : 大 6g9 ” ”| 。 活动 链接 0 : 国 | CC ”| 
下 划 线 样式 0D : [ 芭 在 变换 图 像 时 显示 下 区 | 线 ba 











| [L 和 有 助 om ] [了 ] [应 用 








| 图 2-13 【页 面 属性 】 对 话 框 


( 6 ) 其 他 保持 默认 值 ， 设 置 完成 后 ， 单 击 【 确定 】 按 钮 关闭 该 对 话 框 。 
2 . 通过 CSs 选择 袁 样 式 控 制 链接 文本 的 颜色 
不 或 励 使 用 前 面 介 绍 的 方法 控制 链接 颜色 ， 而 是 建议 建立 CSS 选择 辟 样 式 ， 通 过 定义 
CSS 来 控制 链接 文本 的 颜色 。 尽 管 链接 标记 ( 锚 标 记 ) <a》 没有 link、active、hover 和 
visited 等 属性 ， 但 是 可 以 利用 下 面 的 代码 ， 定 义 相应 的 属性 。 
a:link {color: 如 OOOFF} 
a:active {color: #FFO000} 


a:visited { color: #00FFOO} 
a:hover{ color: #000000} 


上 面 的 代码 表明 ， 在 文档 中 将 未 访问 链接 的 颜色 显示 为 蓝 色 ; 正在 访问 链接 的 颜色 显示 
为 红色 ; 已 经 访问 链接 的 斋 色 显示 为 绿色 ; 鼠标 悬 停 位 置 所 在 的 链接 显示 为 黑色 。 


2.3.4 ”使 用 文件 选择 对 话 框 


Dreamweaver CS6 的 【选择 文件 】 对 话 框 经 常 使 用 ， 打 开 超 级 链接 的 【属性 检查 器 ] 面 
板 ， 单 击 【 链接 】 选 项 右 侧 的 【浏览 文件 】 按 钮 男 ， 可 以 打开 该 对 话 框 。[ 选择 文件 】 对 话 
框 主 要 用 来 在 本 地 站 点 选择 文 
件 ， 提取 文件 的 URL 路 径 和 和文。 | wgets8: Oxiag 
件 名 ， 如 图 2-14 所 示 。 在 建立 二 




















pe a 、 es 查找 范围 [I): | 回 images “Op: 
链接 时 9 位 于 该 对 话 框 下 半 部 分 加 01. jp 名 admovie. jpe 上 @] footbg psd 
的 【URL )】 文 本 框 和 [【 相 对于】 下 | a 
加 回 
四 2 Ey 到 04. jpe [a] di. psd 
拉 列 表 框 是 很 重要 的 部 分 下 向 国 aboutus. ]pe 电 ] favnew. gif 
ee a Re madmin O01. gif | footbg. gif | 
就 对 它们 进行 简单 的 介绍 。 < \ ] 
Ee N 文件 名 0D: | 
从 文件 列 表 格 中 选 二 可 : 文件 类 型 (T): | 图像 文 件 (Gk. gif;*. jPE:*. JPeeg;*. Pne;* v| es 
De 3 在 【 URL 】 文本 框 中 URL.: images/ | 
就 会 显示 该 文件 的 路 径 。URL | 机 于 [点 根 旧 录 因 
了 人 、 在 站 点 定 尺 中 更 改 抽 认 的 链接 相对 于 
的 路 径 包 含 多 种 形式 ， 有 绝对 回 预览 图 估 





路 人 径 、 相 对 路 径 还 有 相对 根 目 
东 的 路 径 ， 出 现在 【URL 】 文 本 


2-14 【选择 图 像 源 文件 】 对 话 框 


框 中 的 路 径 是 根据 【相对 于 】 下 拉 列 表 框 中 的 命令 来 确定 的 。 
单 击 三 角 按 钮 总 打开 【 相对 于 】 下 拉 列 表 框 ， 可 以 看 到 该 列表 有 两 个 选项 ， 如 图 2-15 
所 示 。 
@ 选择 【文档 选项 ， 则 在 【URL 】 文 本 框 中 出 现 的 URL 地 址 采用 相对 地 址 形式 ， 相 对 
的 基准 就 是 当前 正在 编辑 的 文档 。 
@ 选择 【 站 点 根 目 录 】 选 项 ， 则 在 【URL 】 文 本 框 中 出 现 的 URL 地 址 是 相对 根 目录 的 
形式 。 
有 时 候 在 选择 一 个 文件 后 ， 在 【 URL 】 文 本 框 中 会 看 到 如 图 2-16 所 示 的 内 容 ， 在 URL 地 
址 前 面 有 file:// 这 样 的 前 缀 。 





URL.: ile:ri cha imagesi 1ndex 
fa 
在 站 点 定妆 中 更 路 默认 的 链接 相对 于 
加 预览 图 像 [w] 预览 图 朝 
图 2-15 【 相对 于 】 下 拉 列 表 框 图 2-16 【URL 】 文 本 框 中 显示 File:/ 


出 现 这 种 情况 的 原因 就 是 当前 文档 在 设置 超 链 接 之 前 从 来 没有 被 保存 过 ， 也 就 是 说 ， 该 
文档 在 本 地 站 点 的 磁盘 上 不 能 被 找到 ， 也 就 无 法 计算 文件 的 相对 路 径 了 。 如 果 在 文档 中 出 现 
这 样 的 URL 地 址 ， 那 么 链接 显示 就 是 箱 误 的 。 一 般 来 说 ， 将 文件 保存 后 ，Dreamweaver CS6 
会 自动 将 文档 中 的 链接 地 址 进行 更 新 ， 不 过 最 好 的 方法 还 是 事先 保存 文档， 然后 在 文档 中 建 
立 超 链接 。 


2.4 ”网 站 建设 常用 操作 


在 网 站 建设 中 经 弟 用 到 文本 超 链接 、 链 接 到 命名 锚 、 电 子 邮 件 链 接 、 无 地 址 链接 、 脚 本 
链接 、 导 航 条 、 图 像 映 射 等 操作 。 本 市 将 重点 介绍 这 些 制作 方法 ， 让 读者 掌握 网 站 建设 中 的 
半 意 用 超 链接 设置 。 


2.4.1 文本 超 链接 


文本 超 链 搁 是 最 曾 用 的 超 链接 ， 利 用 这 种 链接 ， 可 以 实现 前 面 介 绍 过 的 多 种 链接 。 
Dreamweaver CS6 提供 了 3 种 建立 链接 的 方法 ， 下 面 分 别 进 行 介绍 。 

1. 使 用 【属性 检查 器 】 面 板 建立 链接 

te ei 

) 在 【文档 】 窗 口中 选中 需要 建立 链接 的 文本 。 

1 ) 执行 菜单 栏 上 的 【窗口 】 一 【 属性 】 命 令 ， 出 现 对 应 的 【 属性 检查 器 】 面 板 。 在 
【 属性 检查 器 】 面 板 的 【链接 】 文 本 框 中 输入 链接 的 路 径 ， 如 图 2-17 所 示 。 

( 3 ) 如 果 不 想 直接 输入 复杂 的 URL 地 址 ， 也 可 以 单 击 【 链接 】 文 本 框 后 面 的 【浏览 文 
件 按钮 电 ， 打开 【 选择 文件 】 对 话 框 ， 在 打开 的 对 话 框 中 选择 一 个 合适 的 文件 。 选 中 文档 
后 ， 相 应 的 URL 地 址 会 自动 填写 到 【 链接 】 文本 框 中 。 
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(O 
CO/) 
DI | 高 3 | 链接 0 下 7BERS] |@ 屿 编辑 站 二 
地 图 mm) | ”| 垂直 边 距 | | 目标 | vY| 边框 6B)| | 对 区. A 
民 | 口 品 J 水平 边 耻 E)| | 原始 | | 多 己 对 于 的 | 默认 值 v 
图 2-17 ”建立 链接 
) 在 【属性 检查 器 】 面 板 上 的 【目标 】 下 拉 列 表 框 中 ， 可 以 指定 被 链接 文档 的 载 入 位 
/ 置 。 在 ) 0 被 链 接 文 档 显 示 在 当前 窗口 或 框架 中 。 ee 
J | 要 从 【属性 检查 器 】 面 板 的 【 目标 】 人 下拉 到 表 框 选择 一 
) 探 作 完 成 后 ， 可 以 看 到 被 选择 的 文本 变 为 监 色 ， ee 下 男 
ne 伏 辟 或 者 是 Web 服务 器 不 能 识别 的 文档 类 型 ， 例 如 一 个 带 有 .rar 
扩展 名 的 压缩 文件 ， 或 市 有 .exe 扩展 名 的 执行 文件 ， 通 常 浏览 器 会 打开 一 个 如 图 2-18 
所 示 的 对 话 框 ， 提 示 用 户 下 载 。 在 Internet 中 就 是 经 常 使 用 这 种 特性 为 用 户 提供 文件 下 
| 载 功能 。 
| 2 .使 用 对 十 框 建立 超级 链接 


ee 肾 如 下 。 
) 首先 将 插入 点 放置 到 要 插入 链接 的 位 置 。 
| 下 ) 执行 菜单 栏 上 的 【 插入 】 一 【超级 链接 】 命 令 ， 或 是 单 击 【 插入 】 面 板 上 的 【超级 
链接 】 按 钮 全 ， 这 时 会 出 现 如 图 2-19 所 示 的 【 超级 链接 】 对 话 框 。 


机 。 如 果 下 面 的 女 件 信息 可 
| 的 来 闻 ， 请 不 要 打开 或 译 存 此 


flashfxp. rar 
文件 类 型 : ”inRAR 压缩 净 件 


来 源 : .etnlec. com. en 




















您 想 要 打开 文件 还 是 将 它 保 存 到 您 的 计算 机 ? 


打开 此 类 文件 前 始终 询问 包 ) 











| 图 2-18 【文件 下 载 】 对 话 框 | 图 2-19 【超级 链接 】 对 话 框 


3 ) 在 【文本 】 文 本 框 中 输入 链接 文字 。 

4 ) 在 【 链接 】 文 本 框 中 输入 链接 目标 文件 。 

5 ) 在 【目标 】 文 本 框 中 输入 链接 目标 的 打开 位 置 。 

6 ) 在 【标题 】 文 本 框 中 输入 该 链接 的 提示 文字 。 

7 ) 在 【访问 键 】 文 本 框 中 输入 可 以 访问 该 链接 的 快捷 键 字符 。 

8 ) 在 【Tab 键 索引 】 文 本 框 输入 该 链接 的 Tab 索引 号 。 

( 9 ) 设置 完成 后 ， 单 击 【 确定 】 按 钮 进行 确认 ， 并 关闭 该 对 话 框 。 
3. 使 用 菜单 命令 建立 链接 

使 用 菜单 命令 建立 链接 的 方法 和 步骤 如 下 。 
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( 1 ) 首先 选中 要 设置 为 链接 的 文字 。 

( 2 ) 执行 菜单 栏 上 的 【修改 】 一 【建立 链接 】 命 令 ， 这 时 会 打开 Dreamweaver C56 的 
【 选择 文件 】 对 话 框 ， 提 示 选 择 目标 位 置 。 

( 3 ) 选中 目标 文件 ， 单 击 【 选 择 】 按钮 ， 即 可 完成 链接 的 建立 。 


沁 7 兼 职 指导 : 
在 【修改 】 菜 单 中 ， 选 择 【 更 改 链接 】 命 令 ， 会 打开 文件 选择 对 话 框 ， 允 许 修改 当前 的 
链接 位 置 。 选 择 【 删 除 链接 】 命 令 ， 则 会 删除 当前 的 链接 ( 原先 的 链接 文字 不 会 被 删除 )， 


2.4.2 ”链接 到 命名 锚 


利用 命名 锁 ， 可 以 在 文档 中 指定 的 位 置 上 建立 链接 的 目标 端点 。 通 过 对 文档 中 指定 位 置 
的 命名 ， 人 允许 利用 链接 打开 目标 文档 时 ， 直 接 跳 转 到 相应 的 命名 位 置 上 。 使 用 命名 销 ， 不 仪 
可 以 跳 转 到 其 他 文档 中 的 指定 位 置 ， 也 可 以 跳 转 到 当 
前 文档 中 的 指定 位 置 。 

1. 建立 命名 销 记 

建立 命名 销 的 操作 ， 有 了 时候 被 戏称 为 “ 抛 锦 ” 
要 在 文档 中 建立 命名 锁 ， 其 方法 和 步骤 如 下 。 


错 记 名 称 : | 





(1 ) 将 插入 点 放置 到 网 页 中 需要 命名 锚 的 位 置 ， 
tte 

(2 ) 执行 菜单 栏 上 的 【 插入 】 一 【 命名 错 记 ] 命令 。 

GE 

3 之 兼职 指导 


如 果 之 前 选中 了 文字 ， 则 选中 的 文字 会 出 现在 该 【 锚 记 名 称 】 文 本 框 中 。 


4 ) 在 【和 销 记 名 称 】 文 本 框 输入 锁 名 称 ， 单 击 【 确定 】 按 钮 ， 一 个 锁 即 被 插入 到 文档 中 
的 相应 位 置 。 如 果 激 活 了 【文档 】 窗 口中 对 不 可 见 元 素 的 显示 特性 ， 则 可 以 在 【文档 】 窗 口 
中 看 到 锦标 记 。 
(5 ) 如 果 要 修改 铀 的 位 置 ， 可 以 将 该 铀 标记 作为 普通 的 文字 对 行 ， 将 其 在 文档 中 移动 ， 
例如 用 女 标 拖 动 已 ， 或 利用 剪 切 、 粘 贴 操 作 移 动 密 。 单 击 该 销 标 记 ， 可 以 在 【属性 检查 器 】 
面板 中 修改 钾 的 名 称 。 


7 兼职 指导 : 

插入 锚 的 快捷 键 是 《Ctrl+Alt+A 〉 组合 键 ， 利 用 该 组 合 键 ， 能 够 加 快 插入 锚 的 速度 。 锚 
所 在 的 位 置 是 链接 的 目标 端点 位 置 。 换 句 话说 ， 利 用 <a> 和 </a> 标 记 不 仅 可 以 建立 链接 的 源 
端点 ， 而 且 还 可 以 建立 链接 的 目标 端点 。 建 立 源 端 点 需要 使 用 <a> 标 记 的 href 属性 ， 而 建立 
目标 端点 则 需要 使 用 <a> 标 记 的 name 属性 。 


.链接 命名 销 


还 需要 链接 到 文档 中 锁 所 在 的 位 置 ， 建 立 相 应 的 链接 产 冰 氮 。 要 在 文档 中 实现 同 
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命名 锁 的 链接， 其 方法 和 步骤 如 下 。 

(1 ) 选中 需要 作为 链接 的 文字 。 

(2 ) 在 【属性 检查 器 】 面板 的 【链接 】 文 本 框 中 ， 输 入 销 名 称 及 相应 前 组 。 

如 果 要 链接 的 目标 锁 位 于 当前 文档 ， 则 可 以 在 【 属性 检查 器 】 面 板 的 【 链接 】 框 中 ， 输 
入 一 个 “# ”号 ， 然 后 接着 输入 链接 的 销 名 称 。 例 如 要 链接 当前 文档 中 名 为 webName 的 铺位 
置 ， 则 需要 输入 “#WebName”。 

如 果 要 链接 的 目标 铂 位 于 其 他 文档 中 ， 则 需要 先 输 入 该 文档 的 URL 地 址 和 名 称 ， 然 后 输 
入 “# ” 写 ， 骨 输入 锦 名 称 ， 例 如 要 链接 当前 目录 下 about.htm 文档 中 的 webName 和 锁 位 置 ， 
可 以 输入 “about.html#webName”。 


5 兼职 指导 : 

在 使 用 命名 锚 时 ， 需 要 遵循 如 下 的 一 些 准 则 。 

在 一 篇 文档 中 锚 的 名 称 是 惟一 的 ， 不 允许 在 同一 篇 文档 中 出 现 相 同 的 锚 名 称 。 在 一 篇 文 
档 中 ， 如 果 两 个 锚 的 名 称 一 样 ， 但 是 大 小 写 不 一 样 ， 也 是 不 允许 的 。 例 如 名 为 #WebName 的 
锚 和 名 为 #WebName 的 锚 不 允许 出 现在 同一 篇 文档 中 。 

在 链接 锚 时 ， 引 用 的 锚 名 称 要 区 分 大 小 写 。 在 <a> 标 记 的 href 属性 中 定义 的 URL 中 ， 销 
的 名 称 必须 与 希望 链接 的 销 名 称 严格 匹配 大 小 写 。 如 果 销 的 名 称 是 #webName， 而 链接 中 指 
向 的 锚 是 #WebName， 和 链接 不 一 定 成 功 ， 有 些 浏览 器 能 够 跳 转 到 锚 上 ， 而 有 些 浏览 器 不 能 跳 
转 到 锚 上 。 

链接 和 锚 都 不 能 误 套 ， 但 是 可 以 同时 为 文本 指定 锚 和 链接 。 


2.4.3 建立 电子 邮件 链接 


很 多 情况 下 ， 需 要 将 网 站 管理 员 的 电子 邮件 地 址 保留 在 网 页 上 ， 以 便于 及 时 获取 外 界 反 
馈 信息 ， 这 时 可 以 在 网 页 中 使 用 电子 邮件 链接 。 电 子 邮件 链接 是 一 种 特殊 的 链接 ， 单 击 这 种 
链接 ， 不 是 跳 转 到 相应 的 网 页 上 ， 也 不 是 下 载 相应 的 文件 ， 而 是 会 局 动 网 页 浏览 者 计算 机 中 
相应 的 电子 邮件 客户 疹 的 应 用 程序 ， 以 便 书 写 电 子 邮 件 ， 并 发 送 到 指定 地 址 。 

建立 电子 邮件 链接 步骤 如 下 。 

(1 ) 选择 网 页 中 需要 作为 邮件 链接 的 文字 。 

( 2 ) 执行 菜单 栏 上 的 【插入 】 一 【电子 邮件 链接 】 命 令 。 

( 3 ) 这 时 会 出 现 如 图 2-21 所 示 的 【 电子 邮件 链接 】 对 话 框 。 

(4) 在 【E-Mail 】 文 本 框 中 输入 E-Mail 地 
址 ， 如 haiwangzi2002@163.com。 

( 5 ) 设置 完成 后 ， 单 击 【 确定 】 按 钮 ， 关 闭 文本 ， 敬 系 我们 
该 对 十 框 。 se 








六 兼职 指导 : 图 2-21 【 电子 邮件 链接 ] 对 话 杠 
【属性 检查 器 】 面 板 中 的 【链接 】 文 本 框 中 
在 邮件 地 址 前 面 添加 了 “mailto:”， 表 示 该 超级 链接 是 邮件 链接 。 


在 浏览 辟 中 浏览 时 ， 当 用 户 把 鼠标 移动 到 邮件 链接 上 ， 鼠 标的 形状 变 为 手 形 ， 并 且 在 浏 
筑 器 下 方 的 状态 栏 中 显示 出 邮件 的 地 址 。 当 用 户 单 击 该 超级 链接 时 ， 系 统 会 打开 上 默认 的 邮件 
程序 ， 并 在 “ 收 件 人 ” 栏 中 显示 建立 邮件 的 地 址 ， 如 图 2-22 所 示 。 


也 | 四 四 | 多 YY dd 
发 送 检查 拼 与 检查 附件 


[此 收 件 人 : 
本 抄 送 : 
主题 : 








2-22 系统 默认 的 邮件 程序 


2.4.4 建立 无 地 址 链接 


链接 到 文档 和 链接 到 命名 铀 记 是 超级 链接 最 主要 的 两 种 形式 ， 男 外 还 存在 一 些 特殊 的 链 
接 类 型 ， 例 如 无 地 址 链接 和 脚本 链接 ， 利 用 这 些 链 接 可 以 完成 一 些 符 殊 功能 。 

无 地 址 链接 是 指 疫 有 经 过 指派 目标 妆 幢 的 链接 ， 利 用 无 地 址 链接 ， 可 以 激活 文档 中 链接 
对 应 的 对 象 或 文本 。 一 旦 对 过 或 文本 逢 激 洒 ， 则 可 以 为 之 添加 一 个 行为 (Behavior ) 以 实现 
当 鼠 标 移动 到 链接 上 时 进行 图 像 切换 或 显示 分 层 等 动作 。 

建立 无 地 址 链接 的 方法 和 步骤 如 下 。 

(1) 在 【文档 】 窗 口中 ， 选 择 需要 设置 链接 的 文本 、 图 像 或 其 他 对 象 。 

(2 ) 在 【属性 检查 器 】 和 面板 的 【 链接 】 文 本 框 中 输入 “六 ”号 即 可 。 


7 之 兼职 指导 : 

如 果 单 击 这 种 地 址 为 一 个 “#” 的 链接 ， 无 论 当 前 处 于 文档 的 什么 位 置 ， 都 会 自动 跳 转 
到 当前 文档 的 开头 位 置 。 如 果 需 要 取消 这 种 跳 转 ， 可 以 用 “ 瑚 # 来 代替 “#， 单 击 这 样 的 
链接 时 ， 就 会 保持 当前 页 面 的 浏览 位 置 。 另 外 ， 还 可 以 在 【属性 检查 器 】 面 板 的 【链接 】 文 
本 框 中 输入 “JavaScript:;”， 也 可 以 建立 无 地 址 链接 。 


2.4.5 ”建立 脚本 链接 


脚本 链接 也 是 一 种 特殊 类 型 的 链接 ， 通 过 单 击 带 有 脚本 链接 的 文本 或 对 象 ， 可 以 运行 相 
应 的 脚本 程序 或 JavaScript 函数 ， 从 而 实现 相应 的 运算 。 如 建立 网 站 访问 时 弹出 的 提示 对 话 
框 、 用 户 注册 时 有 些 必须 输入 的 条 件 疫 有 输入 弹出 的 提示 对 话 框 等 。 

建立 脚本 链接 的 步骤 如 下 。 
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JJ 


Cub 


(1 ) 在 【文档 】 窗 口中 ， 选 择 需 要 设置 链接 的 文本 、 图 像 或 其 他 对 象 。 
(2 ) 在 【属性 检查 器 】 面 板 的 【链接 】 文 本 框 中 输入 脚本 即 可 。 例 如 输入 JavaScript: 
alert( 您 好 ， 欢 迎 访问 我 们 的 企业 网 站 。”)， 即 可 建立 一 个 脚本 链接 ， 如 图 2-23 所 示 。 
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大 图 2-23 设置 的 链接 


(3 ) 在 浏览 愉 中 浏 谢 时 ， 当 把 鼠标 移动 到 虚拟 链接 或 脚本 链接 上 时 ， 鼠 标的 形状 变 为 手 
形 ， 单 击 脚本 链接 时 会 打开 一 个 如 图 2-24 所 示 的 警告 框 。 


了 TICIEOSnfLt InEETImEL EDLIOEET 加 


人 您 好 ， 欢 迎 访问 我 们 的 企业 网 站 。 





大 图 2-24 单 击 脚本 链接 后 打开 的 警告 杠 


2.4.6 ”图像 映射 


图 像 的 映 别 将 一 幅 图 像 分 割 为 耕 干 个 区 域 ， 并 将 这 些 子 区 域 设置 成 热 挟 区 域 ， 然 后 将 这 
些 不 同 的 热 扩 区域 链接 到 不 同 的 页 血 。 当 用 户 单 击 图 像 上 不 同 热 点 区 域 时 ， 就 可 以 跑 转 到 不 


同 的 页 面 。 这 在 网 页 制作 中 经 常 遇 到 。 图 像 映射 的 操作 如 下 。 

在 Dreamweaver CS6 中 新 建立 一 个 文档 ， 执 行 菜单 栏 上 的 【插入 】 一 【图 像 】 命令 ， 在 
【文档 】 窗 口中 插入 一 幅 图 像 。 用 鼠标 选择 该 图 像 ， 执 行 菜单 栏 上 的 【窗口 】 一 【 属性] 命 
令 ， 打 开 【 属性 检查 器 】 面 板 ， 如 图 2-25 所 示 。 
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图 像 ，2K 宽 信 ) 源 娘 件 (5) /images/ favnew. gif ee 局 状 换 (1) v 类 总 ) [无 v| 
nm | 0 二 DFI 下 WE 到 


地 图 | | 垂直 边 距 | | 目标 加) v| 边民 BB)| | 对 区 人 .A 
上 | 口 六 NJ 水平 边 距 Ep)| | 原始 入 问 对 3 的 | 默认 值 v 




















国 图 2-25 ”图像 [【 属性 检查 兹 】 面 板 


下 面 对 【 属性 检查 器 】 和 面板 中 的 图 像 映射 工具 进行 介绍 。 
@ 【地 图 】 文 本 框 : 定义 图 像 名 称 ， 方 便 在 网 页 制作 中 调用 。 


@【 指针 热点 工具 】 按 钮 | 由: 可 以 调整 热点 的 位 置 、 大 小 、 功 能 。 

@【 写 形 热点 工具 】 按 钮 问 ， 通过 在 指定 的 图 像 上 拖 放 鼠标 ， 可 以 创建 一 个 窍 形 热点 区 
域 。 热 点 区 域 会 显示 成 半 透 明 的 阴影 。 

@ 【椭圆 形 热 点 工具 】 按 钮 恒通 过 在 指定 的 图 像 上 拖 放 鼠标 ， 可 以 创建 一 个 椭圆 形 热 
凡 区 域 。 热 点 区 域 会 显示 成 半 透 明 的 阴影 。 
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@ 【多边形 热点 工具 】 按 钮 久 ; 通过 在 指定 的 图 像 上 拖 放 鼠标 ， 可 以 创建 一 个 多 边 形 热 


























尽 区域。 热 扣 区 域 会 显示 成 半 透 明 的 阴影 。 
用 上 述 的 任何 热点 工具 创建 区 域 后， 选中 该 热点 区 域 ，【 属性 检查 器 】 面 板 会 变 成 如 图 
2 一 26 所 示 。 
尾 性 [DD 
到 sa : v me v 
地 图 Nap 
KR 器 |O WY 
国 图 2-26 热 卡 区 域 的 【属性 检查 器 面板 
@【 链接 文本 框 :在 该 文本 框 中 输入 需要 打开 文件 的 路 径 ， 则 在 单 击 热 斥 区域 后 会 打 
开 指 定 的 文件 。 


@ 【 目标】 下拉 列表 框 ， 选择 打开 文件 窗口 的 方式 。 
@【 奉 换 】 下 拉 列 表 框 : 如 果 定 义 了 替换 的 文件 或 者 值 ， 可 以 单 击 后 打开 指定 的 替换 文 
件 或 者 值 。 


2.5 综合 实例 : 陆 城 社区 


通过 前 面 几 个 小 节 的 知识 介绍 及 软件 操作 ， 读 者 就 可 以 开始 制作 自己 的 网 页 。 静 态 网 页 
结构 制作 一 般 分 为 切割 图 片 及 用 Dreamweaver C56 实现 网 页 的 排版 工作 。 下 面 就 以 实例 来 介 
—1 


2.5.1 网 页 图 片 的 切片 与 保存 


陆 城 是 由 蓝 色 动力 开发 设计 的 一 个 推广 型 综合 网 站 ， 网 站 的 内 容 主 要 包括 了 “同学 录 ”、 
“博客 "、“ 论 坛 ”还 有 监 色 动 力 自 导 的 业务 推广 介绍 、 信 息 发 布 等 内 容 。 网 站 动态 部 分 由 ASP 
编写 。 该 网 站 已 经 改版 升级 了 多 次 ， 由 于 贴近 年 轻 人 的 生活 ， 在 整个 网 站 的 建设 风格 上 体现 
出 裔 朋 时 尚 的 特点 

这 里 使 用 re 割 首页 界面 。 首 先 来 看 一 下 它 ， 如 图 2-27 所 示 。 

其 中 图 片 分 割 工具 包含 了 以 下 两 个 工具 : 切片 工具 和 切片 选 择 工具 。 

切片 工具 多 ， 使 用 它 可 以 方便 地 对 图 片 进 行 分 割 。 

切片 选择 工具 总 ， 通 过 它 可 以 方便 地 选取 分 割 好 的 图 片 。 

Ee Photoshop 所 独 有 的 工具 ， 使 用 方便 。 当 进行 第 一 次 分 割 后 ， 它 可 以 根据 
用 户 第 一 次 分 割 的 大 小 调整 剩 下 图 像 的 分 割 大 小 。 


7 兼职 指导 : 

当 在 使 用 切片 工具 时 ， 可 以 按 住 〈Ctr1〉 键 快速 切换 到 切片 选择 工具 . 

如 果 在 制作 的 时 候 没 有 进行 分 害处 理 ， 浏 览 的 就 是 整个 图 片 ， 打 开 网 页 的 速度 就 会 很 
。 在 遇 到 这 种 问题 的 时 候 ， 通 常 是 将 图 片 进 行 分 割 处 理 ， 在 浏览 图 片 的 时 候 就 会 让 图 片 一 
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部 分 一 部 分 地 出 现 ， 实 现 快速 下 载 。 
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国 图 2-27 使 用 Adobe Photoshop 分 割 首页 界面 


另外 ， 应 该 尽量 减少 图 片 的 使 用 。 网 页 上 的 文字 浏览 速度 要 比 图 请 快 得 多 ， 在 能 够 实 
同样 效果 的 前 提 下 ， 用 文字 代替 图 请 将 大 大 提高 网 站 的 浏览 速度 。 


pA 


下 面 就 开始 用 Adobe Photoshop CS5 工具 分 割 界面 。 


(1 ) 启动 Adobe Photoshop CS5。 执行 菜单 栏 上 的 【File (文件 )】 一 【Open (打开 )] 命 
令 ， 打 开光 盘 中 的 Sourse /chap02/ lucity.jpg 文件 ， 如 图 2-28 所 示 。 
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找 范围 II): chap02 
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文件 名 0 : lucity ~ 
文件 类 型 (rm): [所 有 格式 ~ 


文件 大 小 : 494.8K 


国 图 2-28 【打开 】 对 话 框 





(2 ) 单 击 【 打 开 】 按 钮 ， 然 后 单 击 工具 箱 中 的 【缩放 工具 】 按 钮 公 ， 在 场景 中 单 击 鼠标 
右键 ， 在 弹出 的 快捷 菜单 中 选择 100% 缩 放 ， 让 网 页 效果 等 比 缩放 ， 其 效果 如 图 2-29 所 示 。 
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大 图 2-29 等 比 缩放 效果 


( 3) 单 击 工具 箱 中 的 【切片 工具 按钮 多 ， 从 场景 的 左上 角 拉 到 Banner 的 右 下 角 ， 如 
2-30 所 示 ， 图 中 绘制 虚线 框 的 就 是 切割 大 小 。 


国 lucityjpg @ 97.1%(RGB/8) 
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瑟 图 2-30 Banner 的 切割 


(4 ) 保持 【切片 工具 】 选 中 状态 ， 从 上 往 下 的 顺序 把 制作 网 页 要 应 用 到 的 图 乒 分 别 切 
割 ， 如 图 2-31 所 示 。 这 里 要 提示 的 是 网 页 是 由 文字 和 图 片 组 成 的 ， 现 在 切割 的 所 有 图 片上 
的 文字 是 为 了 效果 先 合 上 去 的 ， 只 要 把 要 用 的 育 景 图 片 切割 就 行 。 
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四 片 个 入 谋 


国 图 2-31 切割 小 图 片 
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这 之 兼职 指导 : 

最 好 将 切割 选区 的 下 边框 与 小 导航 的 下 边框 重合 。 如 果 划 分 切割 区 域 不 够 准确 ， 先 用 放 
大 镜 工 具 进 行 放 大 ， 再 选中 分 割 选取 工具 进行 调整 ， 

(5 ) 到 这 里 ， 切 割 工作 基本 完成 。 下 面 要 做 的 就 是 把 它 导出 为 网 页 。 执 行 菜单 栏 上 的 
【文件 】 一 【 存储 为 Web 和 设备 所 用 格式 】 人 命令， 打开 【 存储 为 Web 和 设备 所 用 格式 】 对 话 
框 ， 如 图 2-32a 所 示 。 单 击 【 存储】 按钮 ， 打 开 【 将 优化 结果 存储 为 】 对话 框 ， 在 【 文件 
名 】 文 件 框 中 输入 index， 在 【Format 】 文 件 框 中 选择 【 HTML 和 图 像 】， 保 持 其 他 的 设置 为 
默认 值 ， 如 图 2-32b 所 示 。 单 击 【 保存 】 按 钮 完成 保存 操作 。 


| 可 和 本 :10 
5 


| 
许 证 请 响 :| 林 运 
9| ws 加 下 一 一 下 一 


[mr | [| 二 上 





图 图 2-32a) 保存 文件 





保存 在 并 ): 。 国 我 的 文档 ~ 四 让 上 弛 国 > 
竹 名 称 和 修改 日 其 类 型 大 小 
Corel 2011/3/9 1...。 文件 去 
Corel User Files 2010/12/6 ..。 文件 夫 
县 Snaglt Catalog 2010/9/17 .文件 去 
Visual Studio 2008 2011/3/22 ...。 文件 去 


2011/3/15 ..。 文件 夫 
2011/3/9 1...。 文件 夫 


文件 名 四 :inaes > 
Pen 
设置 : 默认 设置 下 

所 有 切片 下 








国 图 2-32b) 保存 文件 


(6 ) 打开 保存 文件 的 路 径 ， 可 以 看 到 自动 生成 了 一 个 images 文件 夹 ， 文 件 夹 中 是 前 面 
分 割 后 产生 的 小 图 片 ， 由 这 些小 图 片 组 成 了 首页 的 效果 ， 在 设计 的 时 候 可 以 分 别 调用 这 些小 
图 片 ， 如 图 2 所 示 。 
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down]l 向 到 日 怖 : 三 二 居 四 旧 图 
JE 本 偶 你 古 加 标记 





国 图 2-33 分 割 的 小 图 片 
最 后 关闭 ImageReady， 进 入 下 一 步 的 制作 。 
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2.5.2 ”本 地 站 点 网 站 文件 夹 规划 


在 制作 网 站 之 前 ， 首 先是 把 设计 好 的 网 站 内 容 放置 在 本 地 设计 计算 机 的 硬盘 上 ， 为 了 方 
-| 便 站 操 的 设计 及 上 传 ， 设 计 好 的 网 页 都 应 存储 在 一 个 目录 下 ， 再 用 合理 的 文件 夹 来 管理 文 
| 档 。 在 规划 本 地 站 点 的 时 候 ， 应 该 注意 如 下 的 操作 规则 。 
1. 设计 合理 的 文件 夹 

: 在 本 地 站 后 中 应 该 用 文件 来 来 合理 构建 文档 的 结构 。 首 先 为 站 所 创 建 一 个 主要 文件 来， 

“然后 在 其 中 再 创建 多 个 子 文件 来 ， 最 后 将 文档 分 类 存储 到 相应 的 文件 夹 下 。 
| 例如 可 以 在 images 的 文件 夹 中 放置 网 站 页 和 面 的 图 片 ， 可 以 在 aboutus 文件 夹 中 放置 用 
于 介绍 公司 的 网 页 ， 可 以 在 service 文件 夹 中 放置 关于 公司 产品 方面 的 网 页 ， 如 图 2-34 所 
示 为 北京 视点 设计 企业 在 本 地 硬盘 上 规划 建立 的 文件 夹 文档 。 
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2-34 网 站 在 本 地 硬盘 上 的 文件 夹 建立 


Gl 2. 设计 合理 的 文件 名 称 
网 站 建设 由 于 要 生成 的 文件 很 多 ， 所 以 要 用 合理 的 文件 名 称 。 这 样 操作 的 目的 其 一 是 为 


了 方便 在 网 站 的 规模 变 得 很 大 时 ， 可 以 进行 修改 更 新 ;其 二 也 是 为 了 方便 浏览 者 看 了 网 页 的 
文件 名 就 能 够 知道 网 页 所 要 表述 的 内 容 。 

在 设计 合理 的 文件 名 时 要 注意 以 下 内 容 。 

( 1 ) 尽量 使 用 短文 件 来 命名 。 

( 2 ) 应 该 避免 使 用 中 文 文件 名 ， 因 为 很 多 Internet 服务 器 使 用 的 是 英文 操作 系统 ， 不 
能 对 中 文 文件 名 提供 很 好 的 支持 ， 而 且 浏 览 网 站 的 用 户 也 可 能 使 用 英文 操作 系统 ， 中 文 文件 
名 同样 可 能 导致 浏览 错误 或 访问 失败 。 

( 3 ) 建议 在 构建 的 站 点 中 ， 全 部 使 用 小 写 的 文件 名 称 。 很 多 Internet 服务 器 采用 UNIX 
40 


操作 系统 ， 分 文件 的 大 小 与 。 

是， 凡 设 计 为 相同 的 文件 结构 

是 指 在 本 地 站 点 中 规划 设计 的 网 站 文件 结构 要 同上 传 到 Internet 服务 邵 中 被 人 浏览 扑 
网 站 文件 结构 相同 。 这 样 在 本 地 站 氮 上 相应 的 文件 夹 和 文件 上 的 操作 ， 都 可 以 同和 远程 站 点 上 
ee Dreamweaver CS6 将 整个 站 点 上 传 到 Internet 服务 器 上 ， 可 以 保 

远程 站 所 是 本 地 站 扣 完 整 的 复制 ， 以 方便 浏览 和 修改 。 


2.5.3 ”网 页 的 搭建 


ee Dreamweaver CS6 进行 排版 ， 具 体 的 制作 步骤 如 下 。 
) 启动 Dreamweaver CS6， 在 本 地 硬盘 上 设置 lucity 网 站 站 点 ， 并 把 分 割 后 的 小 图 片 
全 部 | images 文件 夹 蜂 ， 也 可 以 直接 从 光盘 中 Sourse /chap02/images 文件 复制 。 
(2 ) 运行 Dreamweaver CS6， 打 开 Dreamweaver CS6 的 操作 界面 ， 如 图 2-35 所 示 。 





DW 文件 Cz) 编辑 (EF) 查看 (WY) 插入 (I) 修改 (格式 (0) 命令 (C) 站 点 (5) 窗口 人 0) 帮助 00 国 v” 妆 v 品 v 设计 器 、 


打开 最 近 的 项 目 主要 功能 


sitelabout hb HTML CS6 新 增 功 能 概述 

siteibottom.asp ColdFusion 

Lh 流体 网 格 布局 

Dw siteibook.asp wmw PHP 

,sitejrusic.asp gw CSS | [本 | Business Catalyst 创作 

,site/liuasp ,JavaScript 

,site/index.asp TE XML ! 
号 流体 网 格 布局 [jj | jQuery Mobie 色 板 
和 Drearmweaver 站 点 .… . 
后 Business Catalyst 站 点 .… 


加 更 多 .. 
四 显 ” 我 的 电脑 


口 不 再 显示 田 - 龟 网 上 邻居 
四 .加 点 面 项 目 


CS3 过 渡 效 果 面板 








| PhoneGap Build 面板 


图 Drearmweaver Exchange » 





3 ) 执行 菜单 栏 上 的 【站 点 】->【 管理 站 点 】 命 
令 ， 打开 【 管理 站 点 】 对 话 框 ， 如 图 2-36 所 示 。 

( 4 ) 在 该 对 话 框 的 左边 是 站 后 列 表 杠 ， 显 示 了 所 
有 已 经 定义 的 站 点 。 单 击 右边 的 【 新建 】 按 钮 ， 则 打 

开 【 未 命名 站 点 1 的 站 点 定义 为 】 对 话 框 ， 如 图 2 一 37 = 
ce a | 
) 在 【未 命名 站 点 1 的 站 点 定义 为 】 对 话 框 中 
本 pe 选项 卡 。 在 【 站 点 名 称 】 的 文本 框 中 输 
































图 图 2-36 打开 的 【管理 站 点 】 对 话 框 













上 路 中 署 峙 忒 欠 工 姜 钠 这 网 
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| 入 将 要 建立 的 站 点 名 称 。 这 里 输入 lucity 作为 站 点 的 名 称 。 在 【 本 地 站 点 文件 夹 】 文 本 框 中 
输入 建立 的 站 点 文件 夹 路 径 ， 这 里 为 EXNIuc 让 WX， 如 图 2-38 所 示 。 


站 点 设置 对 锚 未 命名 站 点 1 





Dreamweayer 站 点 是 网 站 中 使 用 的 所 有 文件 和 资源 的 集合 。 Dreamweaver 
」 站 点 通常 包含 两 个 部 分 ; 可 在 其 中 存储 和 处 理 文件 的 计算 机 上 的 本 地 文件 
夹 ， 以 及 可 在 其 中 将 相同 文件 发 布 冯 web 上 的 服务 器 上 的 远程 文件 来 。 








您 可 以 在 此 处 涯 Dreamweaver 站 点 选择 本 地 立 件 来 和 名 称 。 
站 点 名 称 ; | 未 命名 站 点 1 
本 地 站 点 充任 夹 ; | c\MDocuments and 5ettings\Administrator\My Documents\ 未 | 由 





， 回 lusity v| [€) 谎 [加 
Binages 








我 最 近 的 次 档 
四 


桌面 


[a 
我 的 文档 











选择 :lucity 





国 图 2-38 【选择 根 文件 夹 】 对 话 框 


(6 ) 到 这 里 就 完成 了 站 点 向 导 的 规划 ， 在 【 管理 站 扣 】 








对 语 框 中 就 已 经 拥有 了 刚才 所 设置 的 站 点 ， 如 图 2-39 所 示 。 








(7 ) 单 击 【 完成 】 按钮 ， 然 后 执行 菜单 栏 上 的 【文件 】 
【新 建 】 命令 ， 打 开 【 新 建文 档 】 对 话 框 ， 选 择 【 空 





页 】 选项 组 中 的 【 ASP VBScript 】 选 项 ， 如 图 2-40 所 示 。 























(8) 单 击 【创建 按钮， 在 Dreamweaver CS6 中 创建 一 


个 = = es | " 到 2 一 
人 页 面 。 在 【 标题 】 文 本 框 中 输入 “首页 "， 如 图 2-41 0 
/J\o 





DW 去 牢 {f) 篇 各 {E) 查看 Ww) 揪 氏 ) 由 避 iB) 想 式 i0) 病 寺 ICY 站 点 iSY 窗口 {5 居 助 人 三 " 闪 " 县 " 设计 路 ~ -ioi x 





' > 
:| 工 列 是 定 ， 
;| 1 到 国定 ， 
| | 1 列 了 大 ， 
号: 1 
MetionSerigt .| 2 列国 证 ， 
中 Ee 
: Javascript : 2 列国 定 ， 
- ;| 2 到 固定 ， 
:| 2 并 容 : 
| : ;| 2 训 流 大 ， 
E 和 s | = ， 
Em 示例 中 的 页 SF VESeript 到 iy 惠 st 编写 的 kctime Servar Fages 
、 ‘AP. HET OF | 3 击 因 十 We 
其 地 sf | 3 天国 证， 
‘ColdEnsion :| 3 到 膨大 
: CeldFusicom 办 件 | 3 甬 隧 窟 ， 
oy ;| Js- 2 齐 国 定 , 右 和 的 栏 。 本 十 各 肝 
‘pi : 





| 要 二 中 的 页 


TE 1.0 fransititmel 让， 下 EE 











已 雍 点 - Eority 看.. 
卫 EE vim 
一 一 七 Lciiy. jpE 























国 图 2-40 设置 【 新建 文档 】 对 话 框 


DW 六 SI 济 卉 (E) 查看 Vi 拉 和 人 侦 改 INMI， 情 式 [DO 请 守 [向 ”站 计生 血 DIW 者 折 IH) | 国 ” 羡 ” 曲 * | 8 ”ETEEE 


RB | WR Lt | Fd J | | Ra | i ] 一 一 -一 











上 路 中 团 峙 其 雏 工 美 钠 首 鸭 


AN] 
HL 


[hI ns ls i RL Veil WR 





| cs A 王 汪 央 记 标题 吕 ) | 


史 s 项 问 ) 还 = 舍 因 目标 关 














大 图 2-41 设置 【标题 】 名称 


) 执行 菜单 栏 【修改 】 一 【页面 属 性 】 命 令 ， 打开 【页 和 面 属性 】 对 话 框 ， 如 图 2-42 
本 在 【上 边 距 】 文 本 框 中 输入 0 像素 大 小 ， 这 样 设置 的 目的 是 为 了 让 页 面 的 第 一 个 表格 
能 顶 到 上 边 
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处 观 SS) 








页 面 字体 全) 默认 字体 

太 小 (3): 
文本 颜色 (站 
背景 颜色 @): 三 | 





背景 图 你 如 ) : 
LE 重复 全 ): 





左边 距 出 ) : 








) 单 击 【 确定 】 按 钮 ， 
区 a 在 【和 
本 框 中 输入 需 
认 值 ， 如 图 2-43 所 示 。 


边框 粗细 : 0 
单元 格 边 距 : 0 


上 边 距 串 ): 一 一 





行 数 : 1 


坡度 1000 信 案 一 


单元 格 间距 : 0| 


右边 距 (R): 
下 边 距 0): 


是 图 2-42 设置 【上 边 距 】 


进入 【文档 】 窗 口 ， 执 行 菜单 栏 上 的 【插入 】 一 【表格 】 命 
J 数 】 文 本 框 中 输入 需 
要 插入 表格 的 列 数 1。 在 【 表格 宽度 】 文 本 框 中 输入 1000 像素 。 


要 捅 入 表格 的 行 数 1， 在 【 列 数 】 文 
其 他 的 保持 软 


列 : 1 


像 率 



































吕 图 2-43 设置 【表格 】 属 性 


本 1 列 的 表格 ， 用 鼠标 单 击 选 择 
区 为 #666666， 如 图 2-44 





4 
pe 1 ) 单 击 【 确定 】 按钮， 在 首页 的 项 部 建立 了 一 
”该 表格 ， 在 【 属性 检查 器 】 面 板 设置 表格 的 高 度 为 20， 
所 示 。 
属性 
[39mm] 柑 四 医 类 无 
国 css IJ 无 vv 链接 由 ) 


= 单元 格 水平 名 | 黑 认 | 宽 o 
避 兹 委 直 @)[ 革 人 | 高 0| 20 
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BI 湛江 毕 此 标题 mL | 
目标 多 





村 是 器 


加 图 2-44 建立 的 表格 效果 


( 12 ) 这 样 在 页 面 中 建立 了 一 个 宽 为 1000 像素 ， 高 为 20 像素 ， 育 景 颜 色 为 灰色 的 色 
块 ， 如 图 2-45 所 示 。 











和 untitled-1 (KHTMLD)* - 口 X 
1000 

4 | Wh | » 

<body> <table> <tr>[Ktd [RIS A lo0% v938 x 453v 1K 1 种 Unicode (UTF-8) 


力图 2-45 建立 的 色 块 


( 13 ) 把 鼠标 指针 移 到 第 一 行 表 格 的 最 外 面 ， 执 行 菜单 栏 上 的 【插入 】 一 【表格 】 命 
令 ， 打开 【表格 】 对 话 框 ， 在 【 行 数 】 文 本 框 中 输入 需要 插入 表格 的 行 数 1， 在 【 列 数 】 文 
本 框 中 输入 需要 插入 表格 的 列 数 1。 在 【 表格 宽度 】 文 本 框 中 输入 1000 像素 ， 其 他 的 保持 默 
认 值 ， 再 插入 一 行 表格 。 将 鼠标 光标 移 到 表格 内 部 ， 在 【 插入】 和 面板 中 单 击 【插入 图 像 】 按 
钮 图 ， 打 开 【 选择 图 像 源 文件 】 对 话 框 ， 在 【 吾 找 范围 】 中 选择 图 像 保 存 的 位 置 即 打开 站 点 
中 的 images 文件 来 ， 在 窗口 中 选择 topbg.jpg 文件 ， 其 他 保持 默认 值 ， 如 图 2-46 所 示 。 








选择 文件 名 自 : 回 文件 系统 站 点 根 目录 
个 数据 源 


_ 站 点 和 服务 器 | 


=- @@ 闻 已 加。 图 像 预 师 








top_bg 


当 
二 | 
下 
亲 
H 
注 
a 
支 
由 
| 瑟 宇 
站 





文件 名 好 ): topbg 1000 x 100 JPEG，21 KJ 


st 











URL.: Jimages/ topbe. jpe 


相对 于 : 站 点 根 目 录 | [站 点 定 兴 中 没有 提 世 HTTF 地 址 。] 
在 站 点 定义 中 更 改 默 这 的 谤 接 相 对 干 
岗 | 预览 图 称 


国 图 2-46 选择 要 插入 的 文件 


(14 ) 单 击 【确定 】 按钮 ， 完 成 图 片 的 插入 操作 ， 效 果 如 图 2-47 所 示 。 
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Sp 
py 
= | Untitled-1 (XHTMD)* 
pe 
名 到 
< 





4 
<bodvy> <table> <tr> <td>[Kime 





RS Q lo0% v936 x 453v 21 Kf 3 种 Unicode (UTF-8) 


图 图 2-47 插入 的 图 片 效 果 


(1 又 (13) ~ 步 弛 ， 在 需要 插入 表格 的 地 方 插入 表格 ， 在 需要 合并 单元 
格 的 地 方 进 行 合 并 ， 这 梓 可 以 迅 RE 设计 后 的 效果 如 图 2-48 所 示 。 


3) Untitled-1 (XHTML)* 


nD 





-ls 
Ea i 


ee El 


[ 娱 图 中 心 ] " Twins 恋 情 暴光 阿 Sa 推 翻 口供 
[电影 ] 。 法 国电 影 回 顾 展 于 3 月 4 日 开 肛 

[ 山 黑 推荐 ] 。 分 秒 爆笑 : 全 都 是 整容 车 的 神 
[游戏 动 滥 ] " P52 [最 终 鸭 想 12] 极 可 能 延期 
[ 音 求 ] "Cookies 成 员 Miki 情 . 作 节 大 丰 收 

[ 娱 阁 中 心 ] " Twins 恋 情 暴光 阿 Ss 推 翻 口供 
[电影 ] 。 法 国电 影 回顾 展 于 3 月 4 日 开 攻 

[ 皆 吐 推荐 ] “分 秒 爆笑 : 全 都 是 整容 车 的 祝 


上 
bodv> <table> <tr> <td>[Kime IR | 936 x 453v 496 Kf 71 种 Unicode (UTF-8) 
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国 图 2-48 ”完成 的 排版 效果 


7 兼职 指导 


在 合并 表格 的 时 候 可 以 拖 动 鼠标 选择 表格 ， 然 后 单 击 【 属 性 检查 器 〗】 中 的 【合并 所 选单 
元 格 ， 使 用 跨度 】 按钮 回 。 要 注意 的 是 ， 该 效果 还 要 把 文字 输入 到 双 页 中 才 可 以 i 达到 这 样 的 


效果 。 本 实例 主要 介绍 了 如 何 搭建 网 页 结构 ， 其 他 内 容 将 在 后 面 章 节 的 实例 中 进行 介绍 。 





( 16 ) 执行 荣 单 栏 上 的 【文件 】 一 【 保存】 命令， 打开 【 另存 为 】 对 话 框 ， 因 为 设置 了 
站 上 扣 ， 所 以 【保存 在 】 指 向 的 保存 路 径 就 是 定义 的 站 点 文件 夹 Jucity， 制 作 的 首页 
index.asp 也 要 保存 在 该 文件 夹 下 。 在 【文件 名 】 文 本 框 中 输入 index， 其 他 的 保持 默认 值 ， 
如 图 2-49 所 示 。 





保存 在 CD): | 局 neitr 加 @ 和 让 已 回 - 
呈 3 | Binages 





我 最 近 的 立 档 





一 


文件 名 加 ) : index| 堪 


梨 存 类 型 CT): | Al Documents Gk.htm:wk. html:*. shtm:*. shtml:*. hta: W 

















Uni code 标准 化 表单 F): 。 | GIRL 二 
站 包括 Uniecode 签名 BOM (5) 








| 图 2-49 设置 【另存 为 】 对 话 框 


(17 ) 单 击 【 保 存 】 按 钮 ， 完 成 对 首页 的 保存 。 
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个 人 宣传 网 站 


硬 1 


本 章 将 比较 系统 地 介绍 个 人 网 站 的 建设 全 过 程 。 
从 个 人 网 站 建设 的 前 期 准备 工作 入 手 ， 在 开始 制作 的 
时 候 ， 需 要 在 本 地 建立 网 站 服务 器 ， 然 后 用 
Photoshop 设计 网 页 效果 并 切割 成 图 片 备用 ， 最 后 







动画 及 加 入 动态 效果 是 属于 网 站 的 技术 难点 | 读者 可 
以 多 参考 其 他 相 天 类 书籍 制作 出 更 精美 的 动画 效果 。 





Es 





3.1 网 站 建设 前 期 准备 工作 


如 今 ， 个 人 网 站 在 个 人 生活 中 可 以 起 到 非常 重要 的 作用 。 有 了 个 人 网 站 ， 就 像 是 在 喧 尖 
的 城市 终于 有 了 属于 自己 的 小 屋 ， 屋 子 里 的 疙 饰 ， 各 个 房间 的 用 途 ， 要 结交 什么 样 的 朋友 ， 
甚至 想 做 什么 样 的 买卖 痢 可 以 由 有 目 己 决定 。 越 来 越 多 的 人 在 因 符 网 上 搭建 自己 的 个 人 平谷 ， 
对 于 兼职 者 而 言 无 非 又 多 了 一 个 美雪。 当然 想 制作 好 个 人 网 站 也 不 是 特别 容易 的 事 。 个 人 网 
站 一 定 要 有 个 性 ， 突 出 自己 的 特 氮 。 所 以 在 网 站 制作 之 初 ， 确 定 客户 建 网 站 的 目的 是 非常 需 


要 的 。 
3.1.1 建站 前 的 准备 工作 


一 个 成 功 的 个 人 网 站 ， 前 期 的 准备 工作 是 很 重要 的 ， 好 的 开始 等 于 成 功 的 一 半 。 在 这 一 
阶段 ， 有 两 个 主要 的 问题 需要 考虑 ， 其 一 就 是 要 建立 一 个 什么 样 的 个 人 网 站 ， 也 叫 网 站 定 
位 ， 其 二 就 是 使 用 什么 桩 的 空间 。 

(1 ) 网 站 的 定位 

网 站 主题 的 选择 对 今后 的 发 展 方向 有 决定 性 的 影响 ， 确 定做 什么 内 容 就 要 努力 做 出 特 
色 。 很 多 人 在 建站 初期 总 是 喜欢 在 网 页 里 堆积 大 量 感 兴 趣 的 内 容 ， 但 个 人 的 精力 总 是 有 限 
的 ， 因 为 无 力 维护 而 导致 站 氮 黑 新 缓慢 、 内 容 甘 乏 。 与 其 这 样 ， 不 如 选 定 一 个 主题 并 做 出 自 
己 的 风格 ， 不 求 大 而 全 ， 但 求 小 而 精 。 

(2 ) 空间 的 选择 

昌 前 大 部 分 个 人 主页 还 在 使 用 免费 的 空间 。 网 上 的 免费 主页 空间 很 多 ， 但 真正 稳定 且 快 
速 的 并 不 多 。 选 择 那 些 口碑 不 错 的 站 点 提交 申请 ， 然 后 做 进一步 的 测 远 ， 直 到 往 选 出 理想 的 
空间 。 当 网 站 拥有 相当 数量 的 稳定 用 户 ， 汐 望 进一步 发 展 的 时 候 ， 可 以 考虑 使 用 付费 空间 并 
申请 顶级 域名 。 


3.1.2 个 人 网 站 设计 要 求 


选 好 了 方向 ， 就 要 为 目标 而 努力 了 。 制 作 一 个 成 功 的 个 人 网 站 ， 玖 练 党 握 网 页 设计 和 图 
形 处 理 的 扩 巧 是 必须 的 。 经 验 是 在 实战 中 获得 ， 初 学 者 也 不 必 因 此 而 晨 惧 退缩 ， 多 多 练习 才 
会 朋 提 高。 网 站 建设 中 最 重要 的 莫 过 于 两 个 问题 ， 就 是 设计 和 内 容 。 素 材 的 准备 需要 日 积 月 
么 ， 这 里 侧重 谈 一 谈 兼 职 者 所 关注 的 设计 知识 。 

1 . 个 人 网 站 设计 要 求 

(1 ) 制作 清晰 的 网 页 链接 关系 。 主 要 包 后 导航 清晰 、 布 局 合理 、 层 次 分 明 ， 页 血 的 链接 
层次 不 要 太 深 ， 尽 量 让 用 户 用 最 短 的 时 间 找 到 需要 的 资料 。 

(2 ) 尽量 保持 风格 统一 。 保 持 统 一 的 风格 ， 有 助 于 加 深 访问 者 对 网 站 的 印象 。 要 
实现 风格 的 统一 ， 不 一 定 要 把 每 个 栏目 做 得 一 模 一 样 ， 举 个 例子 来 说 ， 可 以 尝试 让 导 
航 条 祥云 统一 ， 各 个 栏目 及 用 不 同 的 色彩 欣 配 ， 在 保持 风格 统一 的 同时 为 网 站 增加 一 些 
变化 。 

(3 1) 色彩 和 谐 、 重 氮 突 出 。 在 网 页 设计 中 ， 和 根据 和 谐 、 均 衡 和 重 氮 突出 的 原则 ， 将 不 同 
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的 色彩 进行 组 合 、 搭 配 来 构成 美观 的 页 面 。 

( 4 ) 保持 主页 界面 的 清 素性 。 要 吸引 访问 者 长 时 间 停 留 在 一 个 网 站 ， 干 万 不 能 让 用 户 第 
一 眼 就 感 响 压 拥 。 大 量 的 文字 内 容 要 使 用 舒服 的 背景 色 ， 前景 文子 相 育 景 之 则 要 对 比 鲜 朋 ， 
这 样 访问 者 浏览 时 才 不 至 于 眼睛 疲 夯 。 适 当 的 留 白 可 以 让 界面 更 清 丈 。 

(5 ) 坚持 原创 。 刚 开始 学 做 主页 时 ， 适 当 模 念 其 他 的 优秀 设计 是 可 取 的 ， 但 模仿 绝 不 等 
同 于 抄 衣 ， 一 定 要 把 握 好 其 中 的 尺度 。 设 计 是 这 样 ， 内 容 的 选取 也 是 如 此 ， 多 一 些 原 创 的 内 
容 ， 主 页 才 会 市 有 更 多 的 个 性 色彩 。 

( 6 ) 动态 效果 不 宜 太 多 。 适 当 的 动态 效果 可 以 起 到 画龙点睛 的 作用 ， 但 过 多 的 动态 效果 
会 让 人 有 眼花 综 乱 而 抓 不 住 主题 。 

2 .应 用 合理 的 开发 技术 

(1 ) 明确 技术 是 为 设计 服务 的 ， 不 要 沉迷 于 技术 的 运用 ， 坚 决 据 弃 那 些 华 而 不 实 的 
特效 。 

( 2 ) 先 为 站 挟 定 义 好 统一 的 外 部 CS$， 内 部 页 面 都 调用 这 个 CSS。 这 样 ， 不 但 可 以 让 网 
页 在 浏览 颖 改变 设置 时 不 变形 ， 还 有 有 助 于 保持 整个 站 点 的 风格 统一 ， 同 时 方便 修改 。 

( 3 ) 不 要 打开 过 多 的 新 窗口 。 每 个 链接 都 要 打开 不 同 的 新 窗口 ， 尤 其 让 人 反感 。 

( 4 ) 避免 使 用 Java Applet 等 移入 式 特效 ， 因 为 它们 会 耗费 过 多 的 系统 资源 ， 但 可 以 适 
当 使 用 Flash 小 动画 。 

(5 ) 图 像 的 制作 要 兼顾 大 小 和 美观 。 图 片 和 文字 的 混 排 、 图 片 的 合理 压缩 可 以 让 页 面 
美观 而 且 文 件 小 巧 。 即 使 是 个 性 十 足 的 设计 站 点 ， 当 费 太 多 的 时 间 在 页 面 下 载 上 也 会 令 
生 大 。 

(6 ) 考虑 平台 的 兼容 性 。 让 主页 尽 可 能 兼容 更 多 的 操作 系统 和 浏览 器 ， 适 应 不 同 的 分 辨 
率 。 要 做 到 这 一 辟 ， 需 要 在 不 同 的 平台 上 多 做 测试 ， 并 根据 测试 结果 修改 设计 。 即 使 不 能 做 
到 完全 兼容 ， 也 要 力争 做 到 让 使 用 不 兼容 平 合 的 用 户 看 到 最 关键 的 内 容 。 

(7) 尽 可 能 优化 网 页 代码 。 


3.1.3 确认 网 站 的 主题 和 内 容 


在 确定 了 网 站 的 内 容 之 后 ， 首 移 要 做 的 就 是 要 给 个 人 网 站 取 一 个 啊 亮 而 又 能 直接 反映 网 
站 内 容 的 名 字 ， 这 很 重要 。 因 特 网 上 的 网 站 众多 ， 同 类 的 网 站 一 定 会 有 很 多 。 疫 有 一 个 好 名 
字 ， 会 影响 到 网 站 的 访问 量 。 有 的 站 长 喜欢 取 一 些 个 性 化 旦 气势 磅 克 的 名 字 ， 实 际 上 是 华 而 
不 实 ， 可 能 会 让 看 到 网 站 名 字 的 人 一 头 雾 水 ， 有 那么 多 内 容 相 近 的 网 站 ， 谁 会 有 那个 好 奇 心 
呢 ? 所 以 要 注意 如 下 几 点 。 

(1) 网 页 名 称 应 该 准确 、 明 了 地 表达 网 页 的 内 容 。 

(2 ) 网 页 名 称 体现 个 性 ， 不 能 藻 入 俗套 ， 才 能 让 人 印象 深刻 。 

(3) 易 记 ， 主 页 名 称 不 要 太 撩 口 、 生 俯 。 

对 于 个 人 网 站 的 栏目 内 容 ， 主 要 由 个 人 的 爱好 来 定 ， 音 见 的 有 : 读书 笔记 、 工 作 档案 、 
客户 档案 、 资 料 收 集 、 禾 书 创 作 、 展 虎 撰 文 、 工 作 简 历 、 在 线 交 流 、 旅 行 世界 、 家 庭 相 册 、 
成 果 成 就 、 成 长 健康 等 。 


3.2 ”搭建 网 站 服务 器 平台 


Dreamweaver CS6 无 法 独立 创建 动态 网 站 ， 必 须 建 立 一 个 Web 服务 器 环境 和 和 数据库 运 行 
环境 。Dreamweaver CS6 支持 多 种 服务 器 技术 ， 所 以 在 使 用 Dreamweaver CS6 之 前 必须 选 定 
一 种 技术 ， 最 常用 的 有 ASP 服务 器 技术 ，Dreamweaver CS6 使 用 ASP 来 编写 脚本 语句 。 要 使 
用 ASP， 必 须 安装 支持 ASP 的 网 站 服务 器 IIS。 


3.2.1 1IS 简介 


进行 ASP 网 页 开发 之 前 ， 首 先 必 须 安 装 编译 ASP 网 页 所 需要 的 软件 环境 ，IIS 是 由 微软 
公司 开发 、 以 Windows 操作 系统 为 平台 来 运行 ASP 网 页 的 网 站 服务 器 软件 。IIS 内 建 了 ASP 的 
编译 引擎， 在 设计 网 站 的 计算 机 上 必须 安装 IIS 才能 测试 ASP 网 页 ， 在 Dreamweaver 中 创建 
ASP 文件 前 ， 同 样 必须 安装 IIS 并 创建 虚拟 网 站 。 

IIS 本 号 提供 各 种 Internet 服务 ， 例 如 可 供 文 件 传输 的 FTP、 发 送 电 子 邮 件 的 SMTP 及 网 
页 浏览 的 网 站 服务 等 ， 这 些 服务 在 “Internet 信息 服务 ”窗口 中 以 目录 的 方式 分 类 。 当 用 户 
利用 IIS 创建 网 站 时 ， 所 有 的 网 页 都 必须 放 在 “网 站 ”这 个 服务 功能 特定 网 站 目录 中 。IIS 
根据 指定 的 网 址 对 应 路 径 ， 将 其 中 的 文件 或 子 目录 对 应 到 计算 机 中 存储 网 页 文件 的 真正 位 
置 。 当 用 户 通 过 浏览 器 浏览 网 页 时 ，IIS 根据 其 指定 的 网 址 取出 对 应 的 文件 ， 解 析 后 再 经 由 
Internet 传送 至 用 户 计算 机 的 浏览 器 上 。 


3.2.2 ” 安 竣 1IS 


对 于 操作 系统 Windows Server 2000 或 者 Windows Professional XP 而 言 ， 系 统 已 经 默认 
安装 了 IIS。 如 果 操 作 系 统 是 Windows Professional 2000， 则 需要 手动 安装 IIS。 

下 面 以 Windows Professional XP 为 例 ， 来 介绍 如 何 安 沪 服务 颖 。 具 体 的 步骤 如 下 。 

(1 ) 将 Windows Professional XP 系统 安装 光盘 插入 到 驱动 器 中 。 

(2 ) 执行 【 开始】 菜单 上 的 【设置 】 一 【控制 面板 】 命 令 ， 打 开 【 控制 面板 】 在 【 控 
制 面 板 】 中 双击 【添加 或 删除 程序 】 打开 【 添加 或 删除 程序 】 对 话 框 ， 如 图 3-1 所 示 。 

( 3 ) 从 左 侧 列表 选择 【 添加 /删除 Windows 组 件 】 按钮 局 ， 打 开 如 图 3-2 所 示 的 对 
J 

( 4 ) 选择 【 Internet 信息 服务 ( IIS )】 复 选 框 ， 再 单 击 【 详细 信息 】 按钮 ， 打 开 如 图 
3-3 所 示 的 对 话 框 ， 从 中 选择 需要 安装 的 Windows 组 件 ， 建 议 勾 选 上 所 有 的 组 件 。 单 击 【 确 
认 】 按 钮 。 

( 5 ) 选中 完成 后 ， 单 击 【 确定 按钮 。 安 准 需 要 从 Windows 光盘 复制 文件 ， 则 会 打开 如 
3-4 所 示 的 【 Windows 组 件 向 导 】 安 装 进度 对 话 框 。 

( 6 ) 安装 完成 后 ， 会 自动 打开 【 Windows 组 件 向 导 】 安 装 完成 提示 对 话 框 ， 如 图 3-5 所 
示 ， 单 击 【 完成 】 按钮 ， 就 可 以 完成 设置 。 

默认 状态 下 ，IIS 会 被 安装 到 C 驱动 器 下 的 Inetpub 目录 中 ， 其 典型 安装 时 的 目录 结构 
如 图 3-6 所 示 。 其 中 有 一 个 名 为 “wwwroot” 的 文件 夹 ， 它 是 浏览 访问 的 默认 目录 ， 访 问 的 


ol 


默认 Web 站 护 也 放置 在 这 个 文件 夹 中 。 


E31 dip 


CoS6 





当前 安装 的 程序 : 排序 方式 人 @): | 名 称 


| 册 Adobe Photoshop CS 大 小 192. OOMB 人 
单 击 此 处 获得 支持 坟 息 。 已 使 用 
上 次 使 用 日 期 ”2004-9-7 
EE 更 区 /出 除 





营 Adobe Reader B.D0.1 -~ Chinese Simplified 大 小 BS5. 30ME 
汇 hhead Hero Burnine ROM 大 小 28. 20ME 
Camtasia Studio 大 小 19.72MB 
名 CCProxy 6.0 大 小 2.04MB 








添加 /项 除 


Windows 六 | Divx Codec 3.1 
组 件 &) 


六 | DIYTOOLBAR - Toolbar 

六 | FPS0N 打印 机 软件 

国 ES c41 故 障 排除 程序 大 小 

i Heroes of Might and Magic II 

he LaserJet 1000 大 小 ”2.88MB 
国 LeapFTF 大 小 1. 05ME 
伍 LiveReg [Symantec Corporation) 大 小 2.01INB 
过 Livelpdate 1.80 (Symantec Corporation) 大 小 4. B2NB 
oo Nacromedia Dreamweaver MX 大 小 349. 00MB 
go Nacromedia Dreamweaver MX 2004 大 小 165. 00MB 
的 Nacromedia Extension Nanager 大 小 3.TTNB 





| 图 3-1 【添加 或 删除 程序 】 对 话 框 


本 indows 组 件 向 导 Internet 信息 服务 (IIS) 


Tindors 租 件 Te 要 添加 或 册 除 某 个 蛆 件 ， 请 单 击 旁边 的 复 选 醋 。 亦 色 框 表示 只 会 实 装 该 组件 的 一 
可 以 添加 或 删除 Windows XP 的 组 件 。 ey 部 分 。 要 但 看 姐 件 内 容 ， 博 单 击 “ 详 细 信 息 ”。 


Internet 信息 服务 IIS) 的 子 组 件 (C): 

FrontPagze 2000 服务 器 扩展 

要 添加 或 删除 某 个 姐 件 ， 请 单 击 过 边 的 复 选 框 。 灰 色 框 表示 只 会 安装 该 姐 件 的 中 入 Internet 信息 服务 管理 单元 ee 

一 部 分 。 要 查看 姐 几 内 容 ， 请 单 击 “ 详 细 依 息 ”。 MYM] :SNWNTP Service 3.6 IEB 
回 铭 公 用 文件 1.0 有 

EU 
二 回 哆 万 推 网 服务 2.3 II 
外 Internet Explorer 
| 可 > Internet 信息 服务 (IIS) 16.0 MB 四 ba a, de 


WO NSYH Explorer 11.8 1B 1 
斋 0utlook Express 0.0 IB 描述 : 使 用 icerosoft FrontPage 和 Visual Interley 来 创作 和 管理 站 点 























描述 : 包括 Web 和 FTF 去 持 ， 以 及 对 FrontPage、 事 劳 处 理 、Active 
Server Pages 和 数据 库 人 连接 的 支持 。 


所 需 磁 盘 空 间 : 57.6 WB = 
可 用 磁盘 空间 : 4141.1 县 详细 信息 @) 所 需 磁 盘 空 间 : 57.6 MB 
可 用 磁盘 空间 : 4140.5 WE 

















图 3-2 【添加 /删除 Windows 组 件 】 对 话 框 


要 indows 组 件 回 导 


正在 配置 组 件 FE ca » 
安装 程序 正在 根据 您 的 请 求 ， 进 行 配置 更 改 。 a 国 国 元 成 “windows 组 件 向 导 


售 已 成 MH 由 大 成 了 Windows 诅 件 疝 时 。 


Fe 请 稍 懂 ,安装 程 序 正 在 配置 组 件 。 所 花 时 间 职 决 于 选 定 的 组 件 。 


状态 正在 完成 附件 和 工具 的 配置 


请 单 击 “ 完 成 ”来 关闭 此 向 导 ， 











国 图 3-4 ” 安 痰 进度 对 话 框 图 3-5 安 疙 完成 提示 对 证 框 


DZ 


| TInetpub 
文件 实 ) 编辑 偿 ) ”查看 局) ”收藏 入 工具 六) 帮助 冲 ) 


全 户 - 四- 让 上 帮办 | 了 zl 天 | 国 : 


地 址 0) [Bc.\Inetpub ~ 国 半 :上 助手 回 - 爷 生 暂 舍 拦 夫 


PT Fe 

bs 11ssamples [sz) mallroot 
Ns 

bd HWW OO 


日 Se 本 地 磁盘 代 :) 
4 [em CCProxy 
BD DIocuments and Set 
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3.2.3 配置 Web 服务 器 


完成 了 IIS 安 疹 之 后 ， 就 可 以 利用 IIS 在 本 机 上 构建 和 控制 Web 站 点 。 要 完成 本 机 站 所 
的 创建 ， 并 提供 对 Web 应 用 程序 技术 的 支持 ， 不 仅 要 有 Web 服务 器 环 境 ， 而 且 要 有 应 用 程序 
服务 器 环境 ， 前 者 提供 对 Web 浏览 的 文 持 ， 而 后 者 提供 对 ASP 等 应 用 程序 的 支持 。1IS 将 Web 
服务 区 和 应 用 程序 服务 局 的 功能 合 二 为 一 ， 所 以 不 用 册 安 疫 其 他 的 应 用 程序 服务 钙 系 统 ， 直 
接 利 用 IIS， 就 可 以 真正 实现 对 Web 站 扣 的 构建 。 

Ls J LS 

首先 要 启动 IIS。 在 不 同 的 操作 系统 下 ， 启 动 IIS 的 方法 也 不 同 ， 下 面 是 在 Windows 
Professional XP 下 启动 IIS 的 方法 。 

(1 ) 在 【 开始】 菜单 中 执行 菜单 栏 上 的 【设置 ] 一 【控制 面板 】 命 令 ， 打开 【控制 面 
板 】 

(2 ) 在 【控制 面板 】 中 双击 【管理 工具 】 图 标 台 ， 打 开 【 管理 工具 】 对 话 框 ， 如 图 3-7 
抽 示 8 

( 3 ) 在 【管理 工具 】 对 话 框 中 双击 【 Internet 信息 服务 ] 图 标 驳 ， 则 会 启动 IIS， 如 
= NI 

2 . 设置 默认 的 Web 站 所 

默认 站 点 就 是 在 浏览 器 的 地 址 栏 中 键入 http:/localhost 或 http:W127.0.0.1 所 显示 的 站 
点 。 该 站 点 中 的 所 有 文件 实际 上 位 于 C:\Inetpubwwwroot 文件 夹 中 ， 其 默认 主页 对 应 页 面 文 
件 的 名 称 是 Default.asp。 

在 IIS 窗口 中 ， 用 鼠标 右键 单 击 “ 黑 认 网 站 ”项 ， 可 以 打开 如 图 3-9 所 示 的 快捷 菜单 ， 
允许 用 户 进行 相应 操作 。 

这 快捷 菜单 中 各 个 命令 的 意义 和 功能 如 下 。 

资源 管理 器 ]， 可 以 启动 Windows 资源 管理 器 ， 并 打开 C:\Inetput\wwwroot 文件 夹 。 
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: 站 件 夺 ) 编辑 人 于) 查看 名 收藏 全) 工具 民 ) 帮助 剖 ) 
四 银 - 图 -让 | 用 国防 地 | 国 : 


; 地 址 占 ) | 加 管理 工具 固有 ;上 RH 手 回 - 舌 | 暂停 拦截 


立 件 和 交 件 夹 在 盆 从 人 种 ons 
i E 
引 共享 此 交 件 夹 
Ee 本 地 安全 策略 地 服务 
快捷 方式 快捷 方式 
人 218 2 








控制 面板 计算 机 管理 事件 查看 器 
ee a 全 是 万 \ 和 
加 
内 共享 文档 
> 数据 源 (0DBC) 性 能 
好 我 的 电脑 a 红 风 7 快捷 方式 
筷 网 上 邻居 已 i 


组 件 服务 
详细 信息 和 决 征 万 式 
管理 工具 
系统 文件 奖 


和 图 3-7 【管理 工具 】 对 话 框 





一 一 一 一 一 一 





灾 业 是 哲 作 凡 下 看 和 0 央 胸 如 
各 二 | 固 | 加 | 窗 国 隐 | 启 | 明 Pl 
Fn [ 恒 乱 冉 妇 : | 
es | C: WININIES eb tpr :nia 
文件 EE 操作) 查看 外 帮助 o en mt 
4 +| 生 | 辆 | 贸 国 加 | 鲁 | 明 |》 


| 加 Internet 信息 服务 描述 
日 罗 SI- SR (本 地 计算 机 | 殉 默 认 网 站 
日 国医 


Ek 】 默认 网 站 
+ b 默认 SMIP 虚拟 服务 器 





量 图 3-8 启动 IIS 国 图 3-9 站 点 的 右键 快捷 菜单 


【打开 】， 可 以 直接 打开 C:\Inetput\wwwroot 文件 夹 窗口 。 

【浏览 】 可 以 启动 浏览 器 ， 并 打开 该 默认 站 所 
控制 站 点 的 激活 或 禁止 状态 。 

【 启动 】 ea ， 以便 外 界 访问 。 

【 停止 }， 停 止 站 氮 服务， 这 时 站 操 就 同 外 界 完 全 断 开 ， 外 界 无 法 访问 。 

【 暂停 】 es 民 务 ， 可 以 重新 选择 该 命令 ， 以 重新 启动 站 点 。 另 外 ， 从 站 点 的 

站 扣 进 行 其 他 类 型 的 管理 。 

【 刷新 】 可 以 对 站 点 进行 刷新 ， 以 反映 最 近 对 站 点 进行 的 改动 。 
可 以 打开 一 个 对 话 框 ， 以 设置 站 点 属性 。 

3. 创建 新 Web 站 点 

要 利用 Dreamweaver CS6 进行 Web 应 用 程序 的 开发 ， 首 先 必 须要 为 开发 的 Web 应 用 程序 
建立 一 个 新 的 Web 站 挟 。 一 般 来 滴 ， 可 以 采用 三 种 方法 建立 Web 站 点 : 真实 目录 、 虚 拟 目 录 
和 真实 站 上 扣 。 最 常用 的 方法 就 是 采用 虚拟 目录 创建 Web 站 所 。 














使 用 虚拟 目录 创建 Web 站 点 的 步骤 如 下 。 

(1 ) 局 动 IIS， 然 后 在 IIS 窗口 的 左 方 ， 用 鼠标 右键 单 击 【 默认 Web 站 点 】 项 ， 打 开 快 
捷 荣 单 。 

( 2 ) 从 快捷 菜单 中 ， 执 行 【新 建 】 一 【 虚拟 目录 】 命令， 这 时 会 打开 如 图 3-10 所 示 的 
【 虚拟 目录 创建 向 导 】 对 话 框 。 

( 3 ) 单 击 【下 一 步 】 按钮 ， 设 置 【 虚拟 目录 别名 】 的 名 称 ， 假 设 在 【别名 】 一 项 输入 
“website”， 如 图 3-11 所 示 。 


虚拟 目录 创建 向 导 EI 国 虚拟 目录 创建 向 导 


欢迎 使 用 虚拟 目录 创建 向 导 | | sg 


以 须 为 虚 握 目录 提供 一 个 简短 的 名 称 或 列 名 ， 以 便于 快速 引用 。 


输入 用 于 获得 Web 虚拟 目 录 访 问 权限 的 别名 。 使 用 的 命名 规 
此 向 导 拖 攻 助 您 在 网 站 上 新 建 一 个 虚 执 目录 ， 则 应 与 目录 命名 规则 相同 ，。 
别名 (&): 


websital 


单 击 “ 下 一 步 ” 控 和 钮 继续 ， 





取消 
国 图 3-10 【虚拟 目录 创建 向 导 】 对 话 框 是 图 3-11 输入 站 点 名 称 


(4 ) 单 击 【下 一 步 ] 按钮 ， 会 打开 如 图 3-12 所 示 的 【 网 站 内 容 目 录 】 对 话 框 ， 提 示 用 
户 输入 虚拟 目录 的 真实 位 置 ， 这 里 输入 的 路 径 为 Di\designem，designem 文件 夹 里 放置 的 就 
是 个 人 网 站 的 所 有 网 站 文件 。 

(5) 单 击 【 下 一 步 】 按钮 ， 会 打开 如 图 3-13 所 示 的 【访问 权限 】 对话 框 ， 提 示 用 户 为 
当前 目录 设置 访问 权限 。 该 对 话 框 中 各 个 选项 的 意义 和 功能 如 下 。 
虚拟 目录 创建 向 导 


网 站 内 容 目 录 问 权 限 
要 发 布 到 网 站 上 的 内 容 的 位 置 。 设置 虚拟 目录 的 态 问 椒 限 。 


允许 下 列 梭 限 : 








输入 内 容 所 在 的 目录 路 径 。 


|Y 运行 脚本 0 ASF) (8) 

厂 执行 和 0 ISAFI 应 用 程序 或 CGI) 宦 ) 
厂 写 入 0 

厂 训 览 上 @) 

单 击 “ 下 一 步 ” 掖 钮 完成 和 译 导 。 


《 上 一 步 @@) 取消 《< 上 一 步 @B) 取消 





图 3-12 输入 虚拟 目录 的 真实 位 置 而 图 3-13 设置 虚拟 目录 的 访问 权限 
【 读 取 } 久 选 该 项 ， 则 人 允许 客户 读 取 虚拟 目录 中 的 内 容 。 通 前 这 项 必须 勾 选 ， 人 否则 用 户 
就 无 法 访问 站 所。 
【 运行 脚本 ( 如 ASP )】 义 选 该 项 ， 则 人 允许 在 虚拟 目录 中 放置 包含 脚本 的 动态 网 页 ， 
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来 说 ， 该 项 不 应 该 全 选 ， 以 免 用 户 从 站 所 中 


以 实现 Web 应 用 程序 的 相关 功能 。 因 为 要 开发 基于 ASP 的 Web 应 用 程序 ， 所 以 应 该 勾 选 
该 项 。 

【执行 ( 如 ISAPI 应 用 程序 或 CGI )】 选择 该 项 ， 则 在 该 虚拟 目录 中 执行 二 进 制程 序 。 一 
般 并 不 介绍 如 何 开 发 服务 器 端的 执行 程序 ， 所 以 该 项 可 以 不 勾 选 。 

【 写 入 】， 久 选 该 项 ， 则 人 允许 用 户 通 过 浏 
览 器 往 站 点 中 写 入 文件 ， 对 于 一 个 安全 站 点 FT 


读 取 源 文 件 ， 或 是 任意 删除 站 点 中 的 文件 。 

【 浏览 ]， 久 选 该 项 ， 当 用 户 访问 该 虚拟 目 
录 时 ， 如 果 目 录 中 没有 默认 主页 ， ea 
中 以 目录 的 形式 显示 站 点 中 的 所 有 文件 。 通 
常 ， 如 果 不 是 为 了 在 站 点 中 提供 下 载 文件 ， 不 
应 该 勾 选 该 项 。 

) 单 击 【 下 一 步 ] 按钮 ， 会 打开 如 图 3-14 
所 示 的 【已 成 功 完成 虚拟 目录 创建 向 导 】 对 话 
框 ， 单 击 【 完成 】 按钮 ， 即 可 完成 操作 。 


3.2.4 设置 站 所 属性 


国生 击 “完成 ” 棱 团 三 读 。 





和 图 3-14 创建 完成 对 话 框 


在 IIS 中 可 以 设置 站 点 或 站 点 目录 的 多 种 属性 。 要 设置 站 点 或 站 点 目录 的 属性 ， 可 以 按 
有 照 如 下 方法 进行 操作 ， 启动 IIS， “0 IIS 窗口 左边 列 选 框 中 选择 要 设置 属性 的 站 点 或 站 


点 目录 ， 这 里 选择 【 默认 网 站 】 选 项 。 然 后 单 
击 鼠 标 石 键 ， 在 打开 的 菜单 中 选择 i 人 mos 
令 ， 此 |] 可 打开 站 辟 的 【 默 认 网 站 属 性 】 对 请 a ISAFI 和 萍 选 器 一 次 档 -一 = 

















框 ， 如 图 3-15 所 示 。 ee = \ 
1. 设置 Web 站 扣 的 标识 和 连接 属性 a ee — 
在 如 图 3-15 所 示 的 Web 站 点 选项 卡 中 ， 可 连接 - 

以 设置 用 于 标识 Web 站 点 的 有 关 参 数 。 sam 
【 网 站 }， 在 【 网 站 标识 】 区 域 ， 可 以 重新 | 可 二 加 

修改 站 点 的 【描述 ] 名 称 、[ IP 地 址 】 和 【TCP EEC 司 [ED 





端口 ]。 

【 连接 】: 在 【连接 超时 】 文 本 框 中 ， 可 以 
设置 保持 连接 的 持续 时 间 。 一 旦 用 户 同 服务 器 
的 连接 时 间 超 出 了 设置 的 时 间 ， 而 且 没 有 进行 ”加 图 3-15 打开 的 【默认 网 站 属性 】 对话 框 
任何 操作 ， 则 服务 器 将 断 开 与 用 户 的 连接 。 该 





时 间 以 秒 为 单位 。 如 果 单 击 勾 选 【 保持 HTTP 连接 】 复 选 按钮 ， 则 可 以 激活 Web 站 点 与 HTTP 
的 保持 连接 功能 。 


升 ， 则 可 以 激活 Web 站 点 的 


【 启用 日 志 记 录 ]， 如果 单 击 勾 选 【 保持 HTTP 连接 】 复 选 按钮 
通过 阅读 日 志 ， 可 以 了 解 哪 些 用 


记录 功能 ， 以 记录 用 户 访 问 细 呈 ， 并 按 所 选 格 式 创建 日 志 。 


户 访问 了 站 点 ， 还 可 以 知道 用 户 访问 了 哪些 信息 。 可 以 在 【 活动 日 志 格 式 】 下 拉 列 表 框 中 选 
择 需 要 的 格式 。 

2. 设置 主 目录 

在 站 点 的 属性 对 话 框 中 单 击 【 主 目录 】 选 
项 卡 ， 进入 如 图 二 0 所 示 的 对 话 框 。 主 目 隶属 -一 一 一 筛选 器 让 立 档 一 























EE 
ee 连接 友 院 源 时 的 内 容 来 源 : 

性 设置 也 相当 重要 ， 在 浏览 圳 里 输入 的 域名 指 加 此 计算 机 上 的 目录 0) 

、 -” a 〇 另 一 各 计 算 机 上 的 共享 &) 
向 的 文件 夹 就 是 指 这 个 主 目录 。 限 于 篇 幅 ， 这 OFAa mo 
里 不 对 对 话 框 上 所 有 的 选项 进行 解说 ， 只 介绍 | ”yy LO 
其 中 一 些 较 重要 的 设置 。 se eh 

口 目 录 浏 览 @) 

【 连接 到 资源 时 的 内 容 来 源 ] 在 对 话 框 上 | ee 本 
\ 、 应 用 程序 名 吕 ) : 默认 应 用 程 | [删除 EE) | 
端 ， 可 以 选择 主 目录 的 位 置 ， 其 中 包含 如 下 3 开始 位 置 供认 网 站 》 本 
条 站 执行 权限 到 ) : | 纯 脚本 v| 
be 应 用 程序 保护 和 :| 中 鞭 用 ) 加 

@ [此 计算 机 上 的 目录 } 如 果 单 选 该 项 





则 将 站 点 的 主 目录 设置 在 本 地 计算 机 
上 ， 这 时 可 以 在 下 方 的 文本 框 中 输入 目 
录 的 全 路 径 ， 如 D:\designem。 

@【 另 一 台 计 算 机 上 的 共享 } 如 果 单 选 该 项 ， 则 可 以 将 站 点 的 主 目录 设置 在 局 域 网 上 
的 其 他 计算 机 共享 目录 中 。 

@【 重 定向 到 URL 】， 如 果 单 选 该 项 ， 则 将 该 站 点 指向 另外 的 URL， 通 常 可 以 用 于 将 多 个 
IP 地 址 指向 一 个 站 点 的 情况 。 

【 本 地 路 径 } 在 对 话 框 中 单 选 【 此 计算 机 上 的 目录 】 或 【 男 一 人 台 计 算 机 上 的 共享 】 选项 
时 ， 会 在 对 话 框 上 显示 访问 许可 设置 的 内 容 项 ， 其 中 最 重要 的 是 【 本 地 路 径 】 文 本 框 路 径 的 
输入 ， ee 才 可 以 访问 到 网 站 的 内 容 。 另 外 ， 还 包括 【 读 取 j 
和 【 写 入 】 两 个 选项 ， 要 注意 的 是 ， 一 般 读 取 选 项 是 一 定 要 选择 的 ， 这 样 才 可 以 访问 该 主 目 
录 下 的 文件 ， es E 最 好 关闭 。 

【 应 用 程序 设置 ]: 在 【应 用 程序 设置 ] 区 域 ， 可 以 控制 Web 应 用 程序 的 一 些 相 应 选 
项 。 所 谓 应 用 程序 ， 指 的 是 两 个 被 标记 为 应 用 程序 的 启动 点 目录 之 间 所 包含 的 全 部 目录 和 文 
件 。 如 果 将 站 点 的 主 目 录 标 记 为 应 用 程序 启动 点 ， 则 站 点 中 的 每 个 虚拟 目录 和 真实 目录 都 自 
动 加 入 到 应 用 程序 中 。 建 议 将 站 点 的 主 目录 设置 为 应 用 程序 。 

【执行 权限 j【 执行 权限 】 可 以 控制 应 用 程序 运行 的 权限 ， 其 包括 如 下 一 些 选 项 。 

@ 【无 】 如 果 选 择 该 项 ， 则 在 当前 选中 目录 中 不 允许 任何 程序 或 脚本 运行 。 

@【 纯 脚本 }， 如 果 选 择 该 项 ， 则 使 映射 到 脚本 引 警 的 应 用 程序 可 以 在 该 目录 下 运行 ， 

而 无 需 拥 有 “执行 ”权限 。 可 以 对 包含 ASP 脚本 、Internet 数据 库 接 口 ( IDC ) 脚本 
或 其 他 脚本 的 目录 使 用 “脚本 ”权限 。" 脚 本 ”权限 比 “ 执 行 ” 权 限 安全 ， 因 为 在 这 
种 权限 下 二 进 制 文件 是 无 法 运行 的 。 

@ [脚本 和 可 执行 文件 ]， 如 果 选 择 该 项 ， 则 人 允许 任何 应 用 程序 在 该 目录 中 运行 ， 包 括 

映射 到 脚本 引擎 的 应 用 程序 和 Windows MT 二 进 制 文件 ( 如 .dl11 和 .exe 文件 )。 

3. 设置 默认 文档 

可 以 为 选中 的 站 点 或 目录 定义 默认 文档 。 当 通过 URL 地 址 访问 站 点 目录 时 ， 如 果 没 有 


图 3-16 设置 主 目 录 属 性 


Am 


of 





























CO 
OC/) 
( -明确 指定 要 打开 文档 的 名 称 ， 就 会 打开 在 这 mm 
里 设置 的 默认 文档 。 如 果 选 中 的 目录 是 主 目 -一 一 一 一 一 一 
录 ， 则 默认 文档 就 是 常 说 的 “主页 "。 从 站 点 ER 
、 、 SE , efault as [添加 中. | 
的 属性 对 话 框 中 ， 单 击 【 文档 】 选项 卡 ， 进 tn Te 
入 如 图 3-17 所 示 的 对 话 框 ， 即 可 进行 相应 
设置 口 启用 文档 页 脚 @) 
凤 目 o | 





: 默认 状态 下 ， 默 认 文 档 的 名 称 是 
”Default. htm 和 Default.asp， 可 以 单 击 【 添 
加 】 按 钮 ， 添 加 新 的 默认 文档 名 称 ， 或 是 单 


击 【 删除 】 按钮 ， 删 除 不 需要 的 默认 文档 名 ee 
称 。 通 过 单 击 文档 名 称 左 方 的 箭头 按 馈 加 |， 


可 以 改变 默认 文档 的 优先 级 顺序 。 四 图 3-17 设置 默认 文档 


一 oo \ 几 ~ 
3.3 用 Photoshop 完成 网 页 设计 
在 这 里 建议 兼职 的 读者 使 用 Photoshop 这 个 软件 ， 因 为 学 习 使 用 这 个 软件 对 于 今后 的 工 
作 是 很 有 用 的 。 本 小 节 就 来 介绍 一 下 用 Photoshop 设计 个 人 网 站 首页 的 注意 事项 。 
3.3.1 首页 布局 设计 


个 人 主页 是 最 直接 体现 个 人 性 格 的 地 方 ， 可 以 放 开 个 人 的 思路 来 创作 。 但 是 一 些 数字 化 
的 东西 ， 如 页 面 的 大 小 及 借 素 要 按照 一 定 的 要 求 来 制作 ， 不 然 以 后 发 布 时 会 问题 百出 。 














——— te | 








| 本 实例 中 的 首页 包括 Logo、 导 航 、Banner、 框 架 模块 及 版 权 几 个 部 分 ， 最 终 完成 的 效果 
| 如 图 3-18 所 示 。 
加 四 wx ” 国 ” 次 " ET mt om az » | Ou 
_ 文件) 蜗 轿 候 ) ”图 像 0) 图 屋 (L) 渤 标 (5) 凋 昼 (FT) 视图 (V) 西口 (Y) 帮助 (H) 


QQ -全 R& | 口琴 ED 大 小 届 卫星 示 门 黑 衣 所 有 加 


nox ood 100% (作品 展 荣 , R68 起) + 区 






” 
中 





' 和 时 伴 鸽 
一 KOFFEE 





全 : _ | Hh} 本 辫 蕊 看 水 二 本 
只 话 才 阐 介 : "和 随 羊 她 记 " 1 10x »| 
啡 ”18 和 各: 轴 畦 伴 包 更 - 
条 ”0100 : 60350014 可 | 

二 :有 | 
之 爱好 :电脑 设 目 、 章 乐 

表 多 [T| The coffoe season of ove.,, 

” 当 受 优 运 上 喇 奸 泡 和 2 动 ,.， 


壮 号 


而 [| :和 和 

»” EE Lovw 1 

® [7 最 近 更 新 

| T| 人 任 介 之 村 一 -和 2 生 … 
®|7| 王位 简介 :网络 各 : 秆 中 
于 bm 

本 | T | ows by 和 位 但 


paw 


BE poG0rAd oNNNPAN NHROD 








大 图 3-18 将 要 制作 的 界面 最 终 效果 
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3.3.2 网 页 大 小 的 设置 


网 页 在 大 小 上 是 有 规定 的 ， 因 为 浏览 网 页 的 显示 恒 大 小 有 规定 ， 所 以 设计 的 网 页 大 小 要 
匹配 显示 器 的 大 小 ， 如 果 不 按 相 应 的 匹配 设置 ， 在 浏览 网 页 时 就 看 不 到 完整 的 效果 。 首 页 的 
RNIN Fo 

打开 Photoshop CS5， 执 行 菜 单 栏 上 的 【文件 】 一 【 新建 命令， 打开 【新 建 】 对 话 
框 。 在 对 话 框 中 的 【 名 称 】 文本 框 中 输入 文件 名 index; 在 【 宽度 】 文 本 框 输入 780， 单 位 
为 【 像素】 在 【 高度】 文本 框 输入 600， 单 位 为 【像素 】 在 【分辨 率 】 文 本 框 输入 72， 单 
位 为 【 像素 /英寸 } 把 【颜色 模式 】 设 置 为 【RGB 模式 )， 单 位 为 【8 位 】 把 【背景 内 容 】 
设置 成 为 【白色 )。 其 他 设置 保持 默认 值 ， 如 图 3-19 所 示 。 


mapy BE 


存 情 预 设 (5)..， 
训 度 tw |780 |[ 细 来 辐 


ai 全 
[Lpevice Central(E),.. | 
Ry 72 | 


里 模式 (M): RGB 部 色 Y| |8 位 | 
青 景 内 容 (C} 














3-19 界面 属性 设置 


7 兼职 指导 : 
现在 网 页 大 部 分 是 在 1024x768 分 辩 率 模式 下 浏览 ， 所 以 一 般 情 况 下 ， 制 作 网 页 的 时 候 
也 要 按照 这 个 大 小 。 但 是 由 于 浏览 器 浏览 网 页 的 时 候 存在 着 滚动 条 ， 所 以 实际 的 网 页 宽度 不 
能 达到 800 像素 ， 一 般 为 780 像素 。 分 辨 率 为 72 是 最 佳 设置 ， 这 样 设计 出 来 的 网 页 效果 在 
显示 器 中 可 以 看 得 很 清楚 ， 设 置 小 了 会 看 不 清 ， 设 置 大 了 会 影响 访问 的 速度 。 


3.3.3 ”页 面 内 容 模 块 的 搭建 


接 下 来 就 是 在 Photoshop 中 利用 各 种 绘图 工具 ， 并 引用 一 些 素 材 ， 设 计 出 首页 的 效 
果 。 由 于 个 人 网 站 的 美工 设计 风格 主要 是 由 个 人 的 性 格 特点 及 风格 所 决定 ， 在 这 里 不 做 具 
) 首先 打开 光盘 中 Sourse\chap03\site\images\，images.psd 文件 是 已 经 设计 好 的 样 
Tw i 只 需要 切割 相应 的 图 片 即 可 ， 效 果 如 图 3-20 所 示 。 
( 2 ) 执行 菜单 栏 上 的 【文件 ] 一 【存储 为 Web 和 设备 所 用 格式 】 命 令 ， 打 开 【 存储 为 
Web 和 设备 所 用 格式 】 对 话 框 ， 如 图 3-21 所 示 。 单 击 【 存储 】 按 钮 完成 保存 操作 。 


) 打开 保存 文件 的 路 径 ， 可 以 看 到 自动 生成 了 一 个 images 的 文件 夹 ， 文 件 夹 里 是 前 


| 
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| 面 分 割 后 产生 的 小 图 片 ， 由 这 些小 图 片 组 成 了 首页 的 效果 ， 在 设计 的 时 候 可 以 分 别 调 用 这 些 
小 图 片 ; 如 图 3-22 所 示 。 


Ps 国 四 ”wos 国 。 和 通 * EE | 曲 sm 区 呈 攻 司 | 
充 件 FF)， 蝙 性 全 ) 图 他 人 ii) 图 层 人 L) 选 可 司 ) 袜 要 (7) 祝 画 fw) 名 已 (W) 帮助 (p) i = | 
hy -| 口 自 吉 达旦 | 烟 。 we 口 旺 示 要 各 控件 | 下 二 三 肥 总 加 

ie pod JO (站, WE} * 


| 





wr 


喇 罪 翌 蛋 
7 KOFFEE 






































SN 


戎 这 :100 加 


的 








和 


hr 
啡 
， 性 
性 
过 
家 





( 仿 国 不 吕 书包 许 国 WW 人 
导 


回国 .: 太 


[iamas 个 人 上午 站 |， 
:= 





国 玫 3-20 切割 设计 的 首页 效果 


存储 为 Web 和 设备 所 用 格式 【100%) 





预 设 : | [未 命名 ] 
EE: 

Es\ 可 选择 

咖啡 伴侣 | 了 
四 透 明度 边 :| 同 
口交 错 Web 靠 色 : 
损耗 : 





























名 转 换 为 sRGB 


预览 : | 显示 器 颜色 与 


元 数据 :| 版 权 和 联系 信息 











图 像 大 小 
党 rm 百分比 :|100 |% 


12. 78K 可 i 调 动画 











内 一 
3 秒 @56.6 Kbps "三 循环 选项 


S| 由 | 100% | R: 一 E : Me pei 索引 : 一 
L_ 庆 | [二 一 一 








国 图 3-21 保存 文件 


60 


; 文件 @) 编辑 区) 查看 @ 收藏 和 工具 (I) 和 玫 助 员 ) sn 


:Oia- 日 .人 访 记 并 肠 间 国 : 


; 地 址 史 ) 忽 D:\desienem\images 浊 | 转 到 
人 








人 可 作为 幻灯 片 查 看 
人 @ 联机 订购 照片 
吊 打印 该 图 片 

悚 、 设 为 点 面 背 及 
他) 复制 加 | CD 


交 件 和 交 件 夹 芷 务 


硬 重 命名 这 个 文件 
应 移动 这 个 文件 
目 复制 这 个 文件 
纺 将 这 个 文件 发 布 到 Web 
名 内 昌 了 邮件 形式 发 送 比 


XK 型 除 这 个 文件 


加 图 3-22 分 割 的 小 图 片 


最 后 关闭 Photoshop CS95， 在 上 面 的 操作 中 把 颜色 及 文字 内 容 换 抒 就 可 以 成 为 个 人 的 
(EE. 


3.4 主要 页 面 的 制作 


Ce Dm CS6 开始 制作 个 人 网 站 的 网 页 了 ， 这 里 介绍 个 人 网 站 主 
页 的 制作 及 个 人 爱好 天 速 制作 方法 。 


3.4.1 主页 的 页 面 设计 


主页 的 制作 过 程 就 是 用 Dreamweaver CS6 排版 制作 网 页 的 过 程 ， 制 作 的 最 后 效果 要 同 用 
Adobe Photoshop 设计 的 网 页 效果 一 至。 具体 的 制作 步骤 如 下 。 
(1 ) 打开 Dreamweaver CS6， 按 在 第 2 章 学 习 掌 握 的 建立 站 所 方 法 在 本 地 建立 designem 
站 扣 ， 进 入 个 人 网 站 的 编辑 页 面 ， 如 图 3-23 所 示 。 
) 在 【文件 】 面 板 中 用 鼠标 右键 单 击 index.htm] 文件 图 标 ， 
【 删除 】 人 命令， 删除 这 个 文件 ， 如 图 3-24 所 示 。 


YY 兼职 指导 : 
这 个 index.html 是 前 面 用 Adobe Photoshop CS5 导出 的 页 面 。 由 于 这 个 页 面 没 有 多 大 的 
A 因此 将 它 删 除 。 不 要 认为 前 面 所 有 的 工作 因此 白 党 ,使 用 Photoshop 切割 ， 可 以 
得 到 图 片 资源 和 版 式 。 








先 样 
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DW 文件 (z) 编辑 (E) 查看 (Y) 插入 (I) 修改 (上 格式 (0) 命令 (C】 站 点 (5) 窗口 (0) 帮助 0 ” 国 r 将 r 品 v ll X 


打开 最 近 的 项 目 主要 功能 


lucityfindex ht HTML C56 新 增 功 能 概述 
sitejabontt htm "ColqFusion 、 

流体 网 格 布局 
siteibottormm.asp PHP 


siteibook.asp » C55 : : Business Catalyst 创作 


siteirausic .asp » JavaScript | 圈 | | CSS 过渡 效果 面板 
1 马 
siteilliu.asp XIL L EE : 


sitelindex nep 流体 网 格 布局 ， 种 jQuery Mobile 色 板 


He | PhoneGap Build 面板 








回 更 多 .. 


快速 六 亲 > 


pei 和 
资源 > Gl 人 风色 含 | 日 


Drearnweaver Exchange » 


] 日 一 口 马 站 点 - lucity (EF... 
| ek [| images 
加 index. html 


lucity. jpe 


人 : 
A 








国 图 3-23 打开 网 站 站 凡 





DW 文件 (z) 编辑 (EF) 查看 (WV) 插入 (I) 修改 (MD) 格式 (0) 命令 (C) 站 点 (5) 窗口 帮助 0 ” 国 r 人 淮 r 品 v 诬 计 加 人 天 















新 建立 件 FF) 
新 建立 件 夹 (R) 
打开 加 ) 

打开 方式 加) 


























前 切 (5) CtrlHX 
拷 由 0) Ctrl+C 
粘贴 () CtrlL+Y 





选择 (5) 


















































» 四 G 
hen 新 奸 主要 功能 
| + 

鄙 lucityfindex htrl BE HTML CSs6 新 增 功 能 概述 pba | -上 传 的 

TD, sitejabout htzm ColdFusion 存 回 0 

一 站 流体 网 格 布局 擅 消 取出 

pw siteibottom.asp ow PHP 加 、 

mm mi i 日 显示 职 出 者 (8) 

Dw siteibook.asp Dw CSS 上 Business Catalyst 创作 龟 原 页 (RY 

本 smsicenp Javaseript 与 远程 服务 器 比较 0) 
"Dsite/liu.asp XML 站 点 特定 的 代码 提示 (3)... 
"En sitejinqexasp 喇 流 体 网 格 布局 1 同步 2)... 

加 打开 站 点 | 显示 同步 信息 

.Dreweaver 站 点 .. 7 pie ， 











me 






遮盖 (I) 






加 更 多 .. 























消除 只 读 尾 性 (T) 
回 快 问 入 iT» 在 远程 服务 器 上 定位 帅 ) 
回 新 增 功能 在 浏览 器 中 预览 B) 
站 资源 3 检查 链接 (K) » 















添加 到 收藏 来 0) 
设计 备注 这 ).. . 
训 览 00)... 
刷新 本 地 文件 0) 


lucity. jpe 


ea Drearmweaver Exchange » 








[| 不 再 显示 


ooereeoooeooerreenoeoeooroonoroeeroooooeees 





| 


1 个 本 地 项 目 被 选中 总 [日志 ... ] 





二 图 3-24 删除 index.htm] 页 面 


3 ) 在 弹出 的 对 话 框 中 ， 单 击 【 是】 按钮 ， 如 图 3-25 所 示 。 Dreanveaver 
) 单 击 【新建 】 选 项 组 中 的 【ASP VBScript 】 选 项 ， 如 图 3-26 | 3 semper 
Tp 训 
) 单 击 后 ， 在 Dreamweaver CS6 中 创建 了 一 个 ASP 页 面 。 在 
【 标 和 文本 框 中 输入 “咖啡 伴侣 ”， 如 图 3-27 所 示 。 


DW HG) 闫 呈 { 查 委 国生 久 1 闫 六 全 } 获 起 疤 ) 鲍 全 人 就 点 (5 容 口 和 村 动 {和 。 可 r 闻 - 中- 设 H 归 - i 一 Di x 











a 
由 








下 Seist 所 SS 的 Briise Seryer Pages 
Etss) 误 半 





Ea EE EE, J EE 





眶 | 叫 








| | 六 



































国 图 3-26 设置 【新 建文 档 】 对 话 框 


DW 六 伍 (P) 篇 加 (E) 查看 搬入 CT) 由 跑 加) 格式 (0) 撮合 (CD) 站 点 (5) 个 口 (J 带动 0) | 设计 点 ” [ 呈 | 回 靶 纪 


Vontitles1l* 区 - 
a 二 一 | adobe BrewsarLab | ewsar 
代 色 | 拆 分 |[ 设计 | | 实时 代码 厅 光 | 实时 视 田 检查 名) 已. 村 四 3 深 于 于 db 


| 名 中 国会 1: 


> 
> 


三 
= 


视 改 了 下 网 条 





| 轧 sruiomem 本地 视图 | 
了 RGIO1UH 名 四 | 日 


OQ lo00% ~ 158 x Sv 1 F/I ticode ME-8) 


ET 
mmr 避 mo 一 上 村 多 
二 








国 图 3-27 设置 【标题 】 名称 


03 


CLO 





04 





( 6 ) 执行 菜单 栏 中 的 【修改 】 一 【 页面 属性 】 人 命令， 打开 【页 面 属性 】 对 话 框 ， 如 图 
3-28 所 示 。 在 【上 边 距 】 文 本 框 中 输入 0 像素 大 小 ， 这 样 设置 的 目的 是 为 了 让 页 面 的 第 一 
个 表格 能 项 到 上 边 。 


外 观 (C55) 
页 面 字体 F): 
大 小 (3): 
文本 颜色 (7): 加 
背景 颜色 (6): 站 | 
朋 景 图 你 I): 





重复 多) : 


上 边 距 F): 下 边 距 加 ) : 








已 酬 _ ][ 了 消 ] [应 











各 图 3-28 设置 【上边 距 】 


(7 ) 单 击 【 确定 】 按 钮 ， 进 入 【 文档】 窗口， 执行 菜单 栏 上 的 【插入 】 一 【表格 】 命 
令 ， 打 开 【 表格 】 对 话 框 ， 在 【 行 数 】 文 本 框 中 输入 需要 插入 表格 的 行 数 1。 在 【 列 数 】 文 
本 框 中 输入 需要 插入 表格 的 列 数 1。 在 【 表格 宽度 】 文 本 框 中 输入 780 像素 。 其 他 的 保持 默 
认 值 ， 如 图 3-29 所 示 。 


行 数 : [1 | 列 :[1 | 
表格 宽度 
过 框 相 细 : 0 | 人情 素 

单元 格 这 距 : 0 | 
单元 格 间距 : 0 ”| 用 


辅助 功能 一 一 


Bu 
摘要 : 





图 3-29 设置 【表格 】 属 性 


( 8 ) 单 击 【 确定 】 按钮 ， 在 首页 的 顶部 建立 了 一 个 1 行 1 列 的 表格 ， 在 【 属性 检查 器 】 
面板 中 的 【 背景 颜色 ] 文本 框 中 输入 颜色 值 为 #9A0000， 在 【 高] 文本 框 中 输入 值 为 12， 如 
3-30 所 示 。 插 入 后 用 鼠标 拖 动 各 单元 格 的 边框 ， 计 它们 紧 靠 在 左边 。 





尾 性 



























































| 《> mL| ”格式 人 F) 无 v 类 | 无 v BI 汪 护 组 二 标题 0) | | 
国 css IDC) | 无 v | 链接 总 ) a 目标 (6) 

国 单元 格 水平 如) 默认 v | 宽 0) 不 换行 0) 口 ”背景 颜色 (5) 有 | oom 页 面 尾 性 ... 
一口 证 重 直 0) 默 W ~ 高 和 D| 12| 标题 @) 口 




















四 图 3-30 设置 第 一 行 表格 的 属性 


( 9 ) 把 鼠标 放置 到 第 一 行 的 最 外 面 ， 执 行 莱 单 栏 上 的 【插入 】 一 【表格 】 命 令 ， 打 开 
【 表格 】 对 话 框 ， 在 【 行 数 】 文 本 框 中 输入 需要 插入 表格 的 行 数 1]， 在 【 列 数 】 文 本 框 中 输入 
需要 插入 表格 的 列 数 3， 在 【 表格 宽度 】 文 本 框 中 输入 780 像素 。 其 他 的 保持 默认 值 ， 如 
3-31 所 示 。 























辅助 功能 
标题 : 
对 齐 标题 : | 
摘要 : 


























国 图 3-31 设置 【表格 】 属 性 


(10 ) 单 击 【 确定 】 按 钮 ， 在 首页 的 第 二 行 建 立 了 一 个 工行 3 列 的 表格 。 将 鼠标 指针 移 
到 第 1 个 单元 格 中 。 在 【 播 入 】 面 板 中 单 击 【 插入 图 像 】 按钮 图 ， 打 开 【 选择 图 像 源 文件 】 
对 话 框 ， 在 【 三 找 范 围 】 中 选择 图 像 保 存 的 位 置 即 打开 站 点 中 的 images 文件 夹 ， 在 窗口 中 
选择 images_09.gif 文件 ， 这 样 做 是 为 先导 入 Log0。 其 他 保持 默认 值 ， 如 图 3-32 所 示 。 


选择 图 莉 源 文件 
选择 文件 名 自 : 全 立 件 系统 站 点 根 目录 
〇 数据 源 


站 点 和 服务 如 








查找 范围 (I): | 回 images v @ 店 落 国 - 

轩 dtot_line01. eif [| images_02. eif (inages_08. elf |inag 
(| home. eif 加] images_03. eif 1 1 
加 homebj. JPpe 四 images_04. eif 卓 imaeges_10. eif 1 本 
加 homebj_r2_c2. JpPEg ®] images_05. eif 罩 images_l1. eif [i 咖啡 伴侣 
[|images. psd images_06. eif (| images_12. eif 1 < KOFFEE 




















®) images_D1. eif 电 images_07. eif | images_13. gif 
< 山 | 








立 件 名 多) : images_09. gif 142 x TB GIF, 4K1 
文件 类 型 (T): 图 像 交 件 (x. gif:*. jpg:*. jpeg:*. png;* W 























URL: images/ images_09. gif 
相对 于 : | 站 专 根 目录 “| [站 点 定义 中 没有 提供 TTP 地 址 。] 
在 站 点 定 必 中 更 改 默 认 的 链接 相对 于 








预览 图 像 





| 图 3-32 ”选择 要 插入 的 文件 


05 


Ft 


二 | (11 ) 单 击 【确定 】 按钮 ， 完 成 图 片 的 插入 操作 ， 再 用 鼠标 选择 第 2 个 单元 格 ， 用 同样 
二 | 的 方法 插入 图 片 images_13.9if， 在 第 3 个 单元 格 册 搬入 一 个 3 行 1 列 的 表格 ， 分别 导入 
-| images_16.gif、images_19.9if、images_22.gif， 完成 的 网 es 3 一 33 所 示 。 





a ey 变 伞 和 1 畏 坟 i) 查看 WW 桥 入 IT) 峡 歼 介 ) 格式 的 | 章 演 氏 ) 贴 点 民 ) 。 面 日 () 旺 助 Ey | #8 ”eT | 
ui 


= 一 | asbs Brouraslab Br Lab | 
a, 洋 时 代码 | 厅 持 “| 实名 视 用 | 相 查 」 筷 ) 司 ， 己 : | | 
5 各 向 抽 址 ; 












































ol | 
2 bl49 





BD 至 | 
村 品 | 覃 而 [Tao | 前 素 可 | 填 著 证) D | 对 演员 | 居中 对 卉 w| 病 呈 | 无 可 | i 、 
到 yl | [| | 六 杞 加 yo | | 
时 a | 二 
本 


| 


国 图 3-33 ”完成 第 二 行 的 效果 











( 12 ) 按照 前 面 介 绍 的 操作 步骤 分 别 导 入 images 文件 中 相关 的 一 些 图 片 ， 完 成 整个 网 页 
的 排版 ， 效果 如 区 3_34 ph 


DW 玄 件 站 畏 国 丰 ) 查看 I) 蜂 XI) 峰 栈 但) 情 马 曙 ) 南 寺 全 ) 贴 点 必 ) 。 曾 口 民有 是 | 


Bi dl Ei i hE 


大 是 ， 独 本 任国 一 一 





[ET | -Sf 4 二 
”各 人 价 二 二 ;1 rp 











| | 设 为 
E 二 nA 
EL | Ri 


咖啡 伴 介 





由 | Ca 
| 所 由 
p= 





E 一 ss， 盖 吾 岂可 以 妍 请 


hl a 


a | TT 
a bd ry A TR | 全 局 
一 一 一 Bl 

恒 己 





| | -EE 
| 


二 用 |。 | 乔 下 六 归 ) | 目标 串 语 邓 | | 过 吗 术 外 
| DOU Twi | | 





| 












































国 图 3-34 整个 网 页 排版 效果 
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至 此 ， 主 页 大 体制 作 完成 ， 还 有 一 些 细 世 和 美化 工作 将 在 后 面 的 小 下 中 介 绍 。 按 下 
《Fl12》 键 可 以 预览 主页 的 效果 。 


3.4.2 ”相片 网 页 制作 


个 人 网 站 在 制作 时 需要 一 个 相片 浏览 的 相片 集 。 该 相片 集 可 以 将 所 有 图 片 进 行 缩 小 ， 在 
网 页 中 以 列表 的 形式 显示 出 来 ， 并 且 每 一 个 缩小 图 片 都 可 以 通过 超级 链接 正音 显示 。 当 用 户 
单 击 一 个 缩小 图 片 后 ， 该 图 片 将 被 放大 ， 然 后 以 实际 的 扩 寸 显示 该 图 像 。 这 对 于 个 人 网 站 
建设 中 建立 个 人 的 相片 册 或 者 可 爱 的 宠物 相册 非常 方便 。 下 和 面 以 汽车 的 展示 为 例 来 介绍 这 
| 
) 首先 打开 Windows【 资源 管理 怖 】 在 站 点 根 目 录 下 建立 新 文件 夹 image， 然 后 在 里 
本 目录 : imagesource 和 photoalbum。imagesource 文件 夹 用 来 保存 要 建立 相册 的 
图 像 兰 文件，photoalbum 文件 夹 用 来 保存 将 要 建立 的 相册 ， 如 图 3-35 所 示 。 





加 加 四 
霜 


: 文件 实 ) 编辑 人 于) 查看 (WO) 收藏 入 工具 民 ) 和 帮助 出 


:@ 扣 -日 - 访 记 檬 及 x 国 - 


; 地 址 器) 已 D:\desienem\image 加 











文件 和 文件 夹 芷 务 人 


3 创 寻 一 个 新 文件 夹 
合格 这 个 文件 严 发 到 
所 


[也 共享 此 文件 来 





3-35 建立 文件 夹 


( 2 ) 将 所 需 的 图 片 复制 到 本 站 氮 的 imagesource 目录 下 ， 即 image\imagesource 下 ， 本 
实例 使 用 了 12 张 汽 车 的 图 片 ， 这 些 图 像 在 随 书 附带 光盘 的 Sourse\chap03\image 文件 夹 下 ， 
如 图 3-36 所 示 。 


1 可 向 富 定 UF OE 
到 时 下“ 师 相 下 查看 辣 ”路 理 昨 | 工具 和] 机 生计 





大 图 3-36 本 例 中 要 应 用 的 素材 
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(O 
CO/ ) 
KK (3 ) 选择 【 新建】 列表 框 中 的 【HTML 】 选 项 ， 如 图 3-37 所 示 。 








打开 最 近 的 项 目 新 建 主要 功能 
电 miityiaaexsltwl ®, HTML CS6 新 增 功能 概述 
,siteiabout.htm TP, ColdFusion 


流体 网 格 布局 

pw siteibottom.asp mw PHP 

"TD, sitelbook.asp TW CS5S Business Catalyst 创作 
ms 


FE siteirusic.asp TD JavaScript 


| das):l CSS Hi 
"Esite/liu.asp To XML 二 让 这 汪 本 从 
下 sitejindqexasp 地 流体 网 格 布局 ， jQuery Mobile 色 本 
鲜 打开 .. 和 和 Drearmweaver 站 点 .… 
| PhoneGap Buld 

站 Business Catalyst 站 点 .… a 面板 

加 更 多 .. 轧 更 多 .. 
回 快速 AT 
辐 新 增 功能 》 
罩 资源 》 


区 Dreattnzearyel Exchanee » 


| 口 不 再 显示 
| 
| 


(4 ) 单 击 【HTML ] 按钮 ， 即 可 在 Dreamweaver CS6 中 创建 一 个 HTML 页 面 。 在 【文档 】 
| 窗口 的 【标题 ] 文本 框 中 输入 该 文档 的 标题 “汽车 相册 ”， 如 图 3-38 所 示 。 


国 图 3-37 选择 创建 基本 页 


| DW 妇 伯 ir 广 三 忆 ) 查 相 fm) 晤 X,iI) 巍 现 曙 ) 在 哉 加 ) 向 闪 代 ) 由 点 心 ) 简 口 () 楼 助 i0 设计 加 [la 

|[ waitiadcz wl 加 

民 博 |. 拍 雪 | 设计 | 项 时 化 员 搬 并 【 沉 时 视图 检查 总) 也 标题 : 汽车 机 早 
及 语 地 二: pl 





HE 

有 TE [了 
犀 怪 
| 他 站 本 | | 在 式 好 ) | 开 吧 此 中 开 二 得 是 起 标 电 如 ) 
本 二 磋 ) | 殉 ”情报 全 “全书 。 上原 从 

< ht "|. | 


. 由 
届 1 十 让 二 项 目 配 这 中 , 叔 [E] 





国 图 3-38 保存 文件 


( 5 ) 执行 菜单 栏 上 的 【文件 】 一 【 保存】 命令， 打开 【 另存 为 】 对 话 框 ， 在 【文件 名 j 
文本 框 输入 汽车 相册 ， 其 他 保持 默认 值 。 单 击 【 保存 】 按钮 保存 该 文档 ， 按 如 图 3-39 所 示 
样式 制作 一 个 简单 的 相册 效果 。 从 图 中 可 以 看 出 ， 在 页 面 的 最 上 方 显示 了 标题 及 副标题 。 相 
册 中 列 出 了 所 有 图 像 的 缩小 列表 ， 它 们 以 表格 的 形式 显示 ， 同 时 在 缩小 图 像 与 文件 名 之 间 插 
入 一 个 回 丰 换行 符 。 
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DW 文件 @) 编辑 (FF) 查看 (VW) 插入 (ID) 修改 (MD) 格式 (0) 命令 (C) 站 点 (3) 窗口 0) 天助 OD | | 设计 器 v 


D:\designem\image\photoalbum\indez. htm 

| [RR |] 拆 分 [ 设计 | [实时 代码 | 所 光 [实时 视图 || 检查 | @, GC ; 
ED BB 合 地 址 :file: /Ddesienen/inagel!photoslbun/index. htm 常用 v 

日 期 

其 | 服务 器 端 包 括 

[5] 注释 

峭 > 交 件 头 

< 脚本 

~ 模板 


所 选 内 容 的 项 要 


未 对 当前 选 定 内 容 应 用 性 何 C3s 属性 。 
re :查看 应 用 了 
些 Css 属性 。 




















泥 MAzt[++ 名 菇 2O 可 





扎 desi enem v| 本 地 视图 w 
吕 CG|3 介 多 | 同 
RI 788 x 502v 32 /5 秒 简体 中 文 (582312) || 本 地 文件 


号 images 
图 像 ,2k 宽 内 | | 源 文件 G) mbaails/003_Tpc jpal 侈 回 车 换 | WY| 类 

训 m[ mbnails/003_T6. jl 多 已 Bs 
DEF yD i 友 闻 汪 rs 


地 图 [| 委 直 边 距 o[ ”| 。 目标 名 ) v| 边民 BY)p | 和 对本 个 
| 门口 口水 平 aEoL | 原始 | 多 局 旨 入 多 默认 值 > 





Pages 


田 











| 


< 
多 1! 个 本 地 项 目 被 选中 , 总 [ 百 志 . ] 











四 图 3-39 生成 的 相册 


(6 ) 生成 的 相册 以 HTML 文件 格式 保存 在 设置 的 相册 目标 目录 中 ， 即 在 本 地 站 点 的 
photoalbum 子 目 录 下 。 而 且 在 该 子 目 录 下 还 建立 了 三 个 目录 及 一 个 相册 的 主页 文件 
index.htm。 这 些 子 目录 及 主页 文件 在 【 资源 管理 辟 】 中 的 显示 如 图 3-40 所 示 。 


photoalbun 回 回 加 
: 文件 灾 ) 编辑 于 ) 查看 占 ) ”收藏 入 工具 并 ) 大助 加) 


生 银 -图 :- 让 万 入 辽 半天 国 - 


: 地 址 钾 ) 加 0D: vdesignemkvimagephotoalbunm 





立 件 和 交 件 夹 芷 务 


加 创建 一 个 新 文件 来 
铝 将 这 个 文件 夹 发 布 到 


zy 共 训 此 交 件 实 


thumbnails 


其 它 位 置 


思 1mage 

我 的 文档 
问 共享 文档 
是 我 的 电脑 
得 网 上 邻居 








大 图 3-40 保存 相册 的 子 目 录 及 主页 
(7) 按 《Fl2》 键 对 生成 的 相册 进行 预览 ， 则 会 显示 所 有 源 图 像 的 缩小 相册 。 当 单 击 相 
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册 中 的 一 个 缩小 图 片 时 ， 则 会 显示 该 图 片 的 原始 大 小 ， 同 时 在 网 页 中 还 会 显示 相册 标题 、 图 
俐 文件 的 文件 名 、 导 航 条 及 产 图 像 。 通 过 导航 条 可 以 显示 “前 一 个 ”图 像 、 下 一 个 ”图 像 
及 显示 相册 “首页 " 。 如 图 3-41 显示 的 是 一 个 产 图 像 。 


习 汽 车 相册 / 008.-JPG - Hicroso ft Internet Explorer 
文件 他) 编辑 儒 ) 查看 名 ”收藏 入 工具 民 ) 帮助 出) 


四 三- 轩 四 国信 寻 交 wx @# 因 四. 总 回 - 口 久 加 
汽车 相册 /008. JPG 


前 一 个 | 首页 | 下 一 个 





车 型 : The 2003 SL55 AMG 





3-41 打开 的 Web 相册 的 子 页 和 面 产 图 像 


把 建立 的 汽车 展示 相册 页 面 主页 与 网 站 首页 的 导航 “汽车 相册 ”做 一 个 链接 就 可 以 实现 
这 个 栏目 的 建设 。 


3.5 ”加 入 动态 效果 


个 人 网 站 如 果 想 做 得 更 加 吸引 人 ， 就 需要 加 入 更 多 其 他 的 动态 效果 ， 如 加 入 时 间 显 示 、 
问候 显示 、 用 户 来 访 IP 显示 等 ， 这 就 要 求 网 站 建设 者 熟悉 一 定 的 网 页 编程 基础 知识 。 在 本 
节 介 绍 一 下 网 页 的 代码 知识 ， 让 制作 的 个 人 网 站 更 加 精彩 。 


3.5.1 常用 网 页 代码 介绍 


(1 ) 首先 ， 用 Dreamweaver CS6 打开 前 面 制 作 的 首页 index.asp。 单 击 工 具 栏 中 的 查看 源 
代码 按钮 ， 场 景 中 会 出 现 首页 的 源 代 码 ， 如 下 所 示 。 


<%QWLANGUAGE="JAVASCRIPT" CODEPAGE="936"%> 

<IDOCTYPE HTML PUBLIC “"-/W3C/DTD HTML 4.01 Transitional//EN" “http://www.w3.org/TR/ 
html4/loose.dtd"> 

<html> 

<head> 


<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 


<title> 咖 啡 伴侣 </title> 

<style type="text/css"> 

Ee 

body { 

margin-top: Opx; 

} 

--> 

</style></head> 

<body> 

<table width="780" height="12" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor= 
"#893821"> 

<tr> 

<td height="12" bgcolor="#9A0000">&nbsp;</td> 

</tr> 

</table> 

<table width="780" border="0" align="center" cellpadding="0" cellspacing="0"> 

<tr> 

<td width="182"><div align="center"><img src="/images/images 09.g1f" width="142" height="76"> 
</div></td> 

<td height="84"><div align="center"><1img src="/images/i1mages 13.g1f" width="479" height="80"> 
</div></td> 

<td><table width="100%" border="0" cellspacing="0" cellpaddine="0"> 

<tr> 

<td height="25"><1img src="/i1mages/images 16.gif" width="77" height="21"></td> 

</tr> 

<tr> 

<td height="25"><1img src="/i1mages/images 19.gif" width="77" height="21"></td> 

</tr> 

<tr> 

<td height="25"><1img src="/i1mages/images 22.g1f" width="77" height="21"></td> 

</tr> 

</table></td> 

</tr> 

</table> 

<table width="780" height="20" border="0" align="center" cellpaddine="0" cellspacing="0" bgcolor= 
"#9A0000"> 

<tr> 

<td width="183" height="22"> <lmg src="/iImages/images 31.gif" width="20" height="20"></td> 

<td width="597">&nbsp;</td> 

</tr> 

</table> 

<table width="780" border="0" align="center" cellpaddine="0" cellspacing="0"> 

<tr> 


<td width="192" height="444" background="/images/images 34.g1f"><table width="80%" border= "0"” 
align="center" cellpadding="0" cellspacing="0"> 

<tr> 

<td>&nbsp;</td> 

</tr> 

</table></td> 

<td><table width="98%" border="0" align="center" cellpadding="0" cellspacing="0"> 

<tr> 

<td width="577" height="201" background="/images/images 36.g1f"><div align="center"> 

<table width="780%" border="0" cellspacing="0" cellpadding="0"> 

<tr> 

<td width="63%" height="200"><table width="85%" border="0" align="center" cellpadding="0O" 
cellspacing="0"> 

<tr> 

<td width="48%">&nbsp;</td> 

<td width="52%"><p>&nbsp;</p> 

<p>&nbsp;</p> 

<p>&nbsp;</p> 

<p>&nbsp;</p> 

<p>&nbsp;</p></td> 

</tr> 

</table></td> 

<td width="37%"><table width="80%" border="0" align="center" cellpadding="0" cellspacing="0"> 

<tr> 

<td>&nbsp;</td> 

</tr> 

</table></td> 

</tr> 

</table> 

</div></td> 

</tr> 

<tr> 

<td><div align="center"><1img src="/images/images 41.g1f" width="538" height="76"></div></td> 

</tr> 

<tr> 

<td><div align="center"> 

<p><lmg src="/images/images 44.gif" width="$S17" height="85"></p> 

<p>&nbsp;</p> 

</div></td> 

</tr> 

</table></td> 

</tr> 


</table> 


<table width="780" border="0" align="center" cellpadding="0" cellspacing="0"> 

<tr> 

<td background="/images/images 52.g1f"><imeg src="/images/images $0.gif" width="163" 
height="23"> <lmg src="/images/images 48.gif width="4" height="24"><1mg src="/images/images S51.gif" 
width="25" height="23"></td> 

</tr> 

</table> 

</body> 


</html> 


(2 ) 下 面 对 HTML 代码 做 一 些 简单 的 介绍 。 

HTML 的 全 写 为 HyperText Mark-up Language， 译 名 为 超 文件 注 标 式 语言 ， 它 是 一 种 为 
普通 文件 中 某 些 字句 加 上 标记 的 语言 ， 其 目的 在 于 运用 标记 ( tag ) 使 文件 达到 预期 的 显示 
效果 。HTML 基本 架构 为 











<HTML> 

<HEAD> 

<TITLE> 网 页 的 标题 </TITLE> 

</HEAD> 

<BODY> 网 页 的 内 容 ， 很 多 标记 都 运用 于 此 </BODY> 
</HTML> 


整 份 文件 处 于 标记 <SHTML> 与 VHTML2 之 间 。<HTML> 用 以 声明 这 是 HTML 文件 ， 让 浏览 器 
认 出 并 正确 处 理 此 HTML 文件 。 

文件 分 两 部 分 ， 由 <HEAD> 至 YHEAD> 称 为 开头 ，<XBODY> 至 YBODY>》 称 本 文 。 基 本 上 两 者 各 
有 适用 的 标记 ， 如 《TITLE> 只 可 出 现 于 开头 部 分 。 

开头 部 分 用 以 载 入 重要 资讯 ， 而 只 有 本 文部 分 会 被 显示 ， 所 以 大 部 分 标记 会 运用 于 本 文 
部 分 。 

《<TITLE> 所 标示 的 是 文件 的 标题 ， 会 出 现 于 浏览 器 顶端 的 名 称 ， 所 以 每 页 有 不 同 而 明确 
的 标题 是 需要 的 。 


( 3) HTML 常用 标记 如 表 3-1 所 示 。 


ok 


表 3-1 HTML 常用 标记 














































































































<HTML> 让 浏览 器 知道 这 是 HTML 文件 
《HEAD> 开头 提供 文件 整体 资 i 

<TITLES 标题 定义 文件 标题 ， 将 显示 于 浏览 强项 端 
<BODY> 设计 文件 格式 及 内 文 所 在 

证 角 =》 为 文件 加 上 说 明 ， 但 不 被 显示 

<p> 为 字 、 画 、 表 格 等 之 间 留 一 空 自行 
<BR> 换行 标记 令 字 、 画 、 表 格 等 显示 于 下 一 行 
<HR> 插入 一 条 水 平 线 

<CENTER》 令 字 、 画 、 表 格 等 显示 于 中 间 
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{4 


标 
“PRE> 
<DIV> 
< 
《]> 
SU 
<H1> 
<H2> 
<H3> 
<H4> 
<H5> 
<H6> 
<FONT> 
<TABLE> 
<CAPTION> 
<TR> 
<][D» 
<FORM> 
<TEXTAREA> 
<INPUT> 
OELEGT]> 
<OPTION> 
<IMG> 
<A> 
<FRAMESET> 
<FRAME> 
<IFRAME> 
<NOFRAMES> 
<MAP> 
<BGSOUND> 
<EMBED> 
<MARQUEE> 
<BLINK> 
<META> 
<LINK> 


<STYLE> 
“Span> 


译名 或 意义 
预 设 格式 
区 隔 标 记 
粗 体 标记 
斜体 标记 


加 上 底线 标记 


~ 

@ 

* 
四 















































六 级 标题 林 


一 日 而 汪 一 已 

~ 
ee 
小 


字形 标记 


表格 标记 
表格 标题 
表格 
表格 栏 
表单 标记 
文字 区 块 


输入 标记 











>H 





[一 





选择 标记 


选项 





形 标 记 


网 











Xt 
> 
< 

CU 


商 
SE 
lal 























作 用 
令 文件 按照 原始 码 的 排列 方式 显示 
设 定 字 、 男 、 表 格 等 的 摆 放 位 置 
产生 字体 加 粗 的 效果 
字体 出 现 斜体 效果 
加 上 底线 
人 粗 变 大 加 宽 ， 程 度 与 级 数 反 比 
本 变 粗 变 大 加 宽 
本 变 粗 变 大 加 帘 
本 变 粗 变 大 加 宽 
本 变 粗 变 大 加 帘 
本 变 粗 变 大 加 宽 






























































做 成 一 打通 列 以 填 入 表格 标题 
设 定 该 表格 的 列 

设 定 该 表格 的 栏 

决定 单一 表单 的 运作 模式 
提供 文字 方 盒 以 输入 较 大 量 文字 
决定 输入 形式 

建立 pop-up 卷 动 清单 


























每 一 标记 标示 一 个 选项 
用 以 插入 图 形 及 设 定 图 形 属 性 
加 入 超级 链接 











于 网 页 中 间 插 入 框架 


设 定 当 浏览 亏 不 文 援 框 以 时 的 提示 
设 定 影像 地 图 名 称 














于 背景 播放 声音 或 音乐 

加 入 声音 、 音 乐 或 影像 

令 文 字 上 下 左右 走动 

闪 炼 文字 

让 浏览 器 知道 这 是 HTML 文件 
定义 该 文件 与 其 他 URL 的 关系 
控制 网 页 版 面 

独立 使 用 或 与 样式 表 同 用 


















































3.5.2 ”Marquee 制作 滚动 字幕 


在 网 页 中 加 入 滚动 的 字幕 ， 可 以 动态 显示 消息 ， 比 静止 发 布 更 能 吸引 人 的 视线 ， 因 此 一 
般 用 于 简单 扼要 的 新 闻 报 道 、 广 告 用 语 等 方面 。 其 中 ， 使 用 Marquee 这 这 个 标签 ， 具有 代码 简 
洁 明 了 、 动 态 效果 种 类 多 、 无 需 使 用 JAVA 的 优势 ， 因 为 实现 这 只 需要 加 入 一 个 HTML 
标识 而 已 。 本 小 万 就 制作 “最 近 更 新 ”的 动态 效果 。 

打开 首页 的 HTML 源 文 件 ， 首 先 找 到 147 行 ， 删除 人 Ytd> 前 的 “&nbsp;”"， 然 后 插入 以 下 
代码 














<marquee height=120 direction=up scrollamount=2 scrolldelay=5S on MouseOver='this.stop()' 
onMouseOut= thls.start(O > 

我 的 新 作品 <br> 

邀请 朋友 去 海南 <br> 


心情 日 记 </marquee> 
如 图 3-42 所 示 。 


D 文件 (F) 编辑 (EF) 查看 (WV) 插入 (I) 修改 (I) 格式 (0) 命令 (C) 站 点 (3) 窗口 0) 帮助 0 | | 设计 器 EE 
| index.asp X 国 asp - 一 
EE rm BrowserLab 一 
| 代码 [ 拆 分 | 设计 | | 实时 代码 | 反光 ”| 实时 视图 || 检查 | G@)， (OD. 标题 : 咖啡 伴侣 | 一 一 
OL 他 地 址 : file:///D |/ de em 1ndex. asp : 


Su 吕 同 ， Dr 人 











ee 迎 而 又 拒 ， “是 抱 在 脸 记 前 面 的 那 
面 琵 人 惟 ， <br> 
<br> 
一 旦 弹 奏 ， 余音 也 可 以 绕 梁 不 郊 .. .</p> 
<p>énbsp ;</p> 
td> 
</tr> 
/table> /td> : 
<td width=" 38%" ><table width SS A NN: 插入 Div 标签 


="80%"” border="0" alien="center”" 加 
cellpadding="0” cellspacing="0"> 巴 图像 : 图 乔 





人 | 直下 c| 其 口 | 





ry 
woo 
[se 


个 极端 自 杰 的 女人 : 二。 
味 租 凉 在 经 从 器 京 的 :一 


| 兴 [##| 


加、 迎 而 双 拒 ,是 抱 。 
. 的 那 面 能 车， :| 
我 的 新 作品 <br> 区 ,余音 也 可 以 统 梁 : 
邀请 朋友 去 海南 <br> :| 仁和 

心情 日 记 47marqueey> : 





同 [ 好 


/tr> 
</table></td> 
/tr> 
</table> 


div > td> = = 
Ctr> body, td th” 的 尾 性 


<tr》 | 二 全 友 本 日 
<td><div align= ”center” ><img src= 三 

“imagesyimages_d41.gif”width="538”height 
="76"></div><ytd> BB desienen | | 本 地 视图 久 
时 EEXEATIE 


«try 
ey Ctr > Ctdy Ctabley Ctr> Ctdy Xdivy 《table> Ctr> Ctd> Ctable> Ctr> <td> 和 loo% ~ 30x S08v dk/T 秒 简体 中 文 (GB2312) 大 
是 这 天 rs 站 点 - desienem [D:\de.. 


[<> mt] | 格式 四 类 下 二 标题 ) | | i 
此 css IC 链接 上) 














加 
[ 浪 
EE 
肌 
国 
a 





























= 
芭 碟 回 目标 (6) i TT index. asp 


2E|] #7 水 平 @)| 默 认 ”~| 宽 o | ”| 不 换行 (0) 口 ” 背 县 颜 色 () 三 || | 页 面 属性 
一 口 并 各 中 黑人 ~| 高 [| |] 标题 久 口 | 























如 图 3-42 加 入 的 动态 代码 


以 上 加 入 的 动态 代码 中 ， 各 代码 的 意思 如 下 。 

@ height 表示 滚动 字幕 的 高 度 

@ direction 表示 字幕 的 滚动 方向 ，up 为 向 上 滚动 ，down 为 向 下 滚动 ，1ef 代 为 左 向 右 滚 
动 ，right 从 右 向 左 滚 动 

@ scrollamount 设置 文字 滚动 的 速度 
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@ scrolldelay 设置 文字 滚动 延迟 时 间 

@ _ onMouseOver=Ythis.Sstop(0) 表 示 当 鼠标 经 过 滚动 字 基 时， 了 字 送 停止 滚动 

@ onMouse0ut=Ythis.startO 表 示 当 鼠标 离开 滚动 字 戎 时 ， 字 如 又 开始 滚动 

这 样 ， 在 首页 中 添加 了 一 个 关于 本 站 的 最 近 更 新 的 滚动 字幕 ， 一 目 了 然 。 以 后 更 新 信 
恩 ， 只 需要 荐 换 掉 4mardquee> 标 答 中 间 的 内 容 就 可 以 ， 这 也 是 吸引 网 友 的 一 个 重要 方面 。 


3.5.3 ”加 入 问候 语 


形 加 入 问候 语 ， 根 据 时 间 的 不 同 ， 显 示 不 同 的 问候 语 ， 会 给 网 友 一 种 杀 切 的 感 总 。 如 上 午 
显示 “上 午 好 ， 欢 迎 来 到 本 网 站 !”， 而 下 午 则 显示 “下 午 好 ， 欢 迎 来 到 本 网 站 "。 下 面 用 一 种 
脚本 语言 JavaScript 来 实现 它 。 将 如 下 代码 插入 到 89 行 ， 如 图 3-43 所 示 。 


| DW 文件 (F) 编辑 (E) 查看 0 插入 (I) 修改 格式 (0) 命令 (C) 站 点 (s) 窗口 0) 帮助 00 | | 设计 器 v x 


D:\desieEnem\indez. asp 
op | Adobe BrowserLab | BrowserLab 三 


“| 代码 设计 | | 实时 代码 | 后 入 “实时 视图 | 检查 | @. 全、 已 
i 千古 一 [Xx] fi 地 址 :| file: /DD | des em eax. a5p EE 常用 = 
































一 : 超级 链接 
hour = tmpDat e. getHours (). : 人 
if (hour<6) : 命名 错 记 

write(“ 读 晨 好 ， 欢 迎 来 到 本 站 ") | 二 水平线 
nour <12) 


write(" 早 上 好 ， 欢 迎 来 到 本 站 ") 


举 续 证 诅 口 





rr 
2 


IOUr< 14) 


Write 人 中 午 好 ， 欢 迎 来 到 本 站 ”) 





可 加 


区 
| |: N21 所 选 内 容 的 质 要 
write ("下 午 好 ， 戏 迎 来 到 本 站 "】) 3 |  : : : font-size 


1LD1 -<22) 
write (晚上 好 ， 欢 迎 来 到 本 站 ") 





nour <18) 


加 [IE 














并 “. stylel” 的 尾 性 
cednts Ee : 必 Azt[++ 
/span> itd> a : = 
<td width="587" ><span class=" stylel”> Ws 潮 
i <a href="/index.asp"》 首 页 《</a> i 《a 各 加 desienen v| 本 地 视图 立 
href=" /image/photoalbum’ index.htm > 时 > 名 G | 已 全 Te | 周 




















3 
E22 
内 
此 
ES 














i <table> tr> <td> <span. stvylel> 
日 转 站 点 - desiegnem (Dde... 


mre en 画 | image 
《> HTML | 格式 全 ) v| BI 已 三 [rm images 
旧 css ID {IT) Il i index. asp 
国 单元 格 。 水 平 多 ) 193| 不 换行 (0) 口 ”背景 颜色 (6G) [ -| 页 面 属性 ，. 
一 口 和 王 直 上 22| 标题 @) 口 ] 






























































加 图 3-43 加 入 问候 语 


| <script language="JavaScript"> tmpDate = new Date(); 
| hour = tmpDate.getHours(): 

if{(hour<6) 

{ 

document.write(" 凌 晨 好 ， 欢 迎 来 到 本 站 站 

} 

else if(hour<12) 

{ 

document.write(" 早 上 好 ， 欢 迎 来 到 本 站 ") 

} 
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else if(hour<14) 

















document.write(" 中 午 好 ， 欢 迎 来 到 本 站 ") 

} 

else if(hour<18) 

‘ 

document.write ("下 午 好 ， 欢 迎 来 到 本 站 ") 

} FE 
else if(hour<22) Wt / 
document.write ("晚上 上 好， 欢迎 来 到 本 站 ") 

} 

else 

| 

document.write(" 夜 里 好 ， 欢 迎 来 到 本 站 站 

} 

</script> 


现在 对 上 面 的 代码 进行 如 下 说 明 。 
脚本 语言 的 代码 全 部 包括 在 标签 《Script> 与 人/script> 之 间 ，language=avaScript" 说 明 
脚本 由 JavaScript 语言 编写 。 

@ 一 般 来 说 ， 有 两 种 脚本 语言 比较 常用 ， 即 JavaScript 和 VBScript。 网 络 上 有 很 多 脚 
本 语言 的 例子 代码 ， 只 需要 找到 相应 的 代码 复制 到 页 和 面 中 即 可 。 

@ tmpDate = new Date0; 新 建 一 个 日 期 的 实例 。hour = tmpDate.getHours(); 用 getHours() 
这 个 函数 取得 tmpDate 这 个 实例 的 小 时 数 。 这 两 句 庆 的 意思 就 是 取得 现在 时 间 的 小 时 
数 赋值 给 hour 这 个 变量 。 注 意 ， 每 句 代 三 后 面 应 加 上 分 号 ， 表 示 语 句 结束 。 

根据 hour 这 个 变量 的 值 用 让、else i 计 f 语句 来 判断 ， 显 示 不 同 的 问候 语 。 


3.5.4 ”状态 栏 动 态 效 果 


JavaScript 应 用 范围 相当 广泛 ， 有 时 用 它 能 够 方便 地 达到 很 好 的 效果 。 这 里 介绍 打字 板 
的 状态 栏 特效 。 这 个 效果 在 网 上 经 单 可 以 看 到 ， 当 网 页 加 载 时 ， 状 态 栏 上 的 文字 打字 板 的 显 
示 出 来 。 它 在 不 额外 占 页 面 空间 的 情况 下 ， 提 供给 网 友 里 多 的 信息 。 只 需要 将 这 上 段 代码 插入 
到 网 页 的 <head> 与 Yhead》 之 间 即 可 。 

其 代码 如 下 : 


<script language="JavaScript"> 

var msg=" 欢 迎 光 临 绵 啡 伴侣 的 个 人 空间 "; 
var Interval=120; 

var seq=0; 

function typetext(){ 

len=msg.length; 
window.status=msg.substring(0,seq+1); 


Seq++; 


1 








(() 
0) 
) if(seq>=len){ 
seq=0; 
window.status=""; 
window.setTimeout("typetext( );",interval); 
} 
else 
window.setTimeout("typetext( );",interval); 
} 
typetext(); 
</script> 
最 终 的 效果 如 图 3-44 所 示 。 
EE 咖 啡 件 认 = 了 crosoft Internet ExzpIorer 
:文件 FE) 编辑 FE) 查看 多 收藏 由 工具 上) 帮助 
| :OE-©O- 四 国信 并 次 ix 车 徐 加 内 - 避 国 -加 久 回合 98 人 
地 址 四 ~ | 外 http:Arl27.0.0.1 悦 图 轴 





学 KOFFEE 








随手 笔记 站 | /~ 最 近 更 新 


写 T 我 的 新 作品 
会 -名 邀请 朋友 去 海南 
心情 日 记 

















和 忽 ] 欢迎 光 临 咖啡 洋 避 的 个 人 





图 3-44 状态 栏 显示 的 打字 效果 


其 他 的 一 些小 动态 效果 ， 如 设置 首页 、 收 藏 本 页 等 功能 请 读者 自行 上 网 搜索 相应 的 代码 
进行 应 用 。 


3.6 网 站 样式 控制 


本 节 主 要 实现 对 网 页 文本 的 编辑 和 (CSS(Cascading Style Sheets) 层 又 样式 表 设 置 应 用 。 
网 页 上 的 文字 需要 通过 编排 才能 整齐 美观 ，Dreamweaver CS6 是 专业 的 网 页 排版 软件 ， 通 过 
CSS 可 以 控制 整个 网 页 的 文字 效果 。 

3.6.1 CSS 的 功能 
CSS ( 层 苗 样式 表 ) 对 于 设计 者 来 说 是 一 种 非常 灵活 的 工具 ， 不 必 册 把 繁杂 的 样式 定义 
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编写 在 文档 中 ， 可 以 将 所 有 有 关 文 档 的 样式 指定 内 容 全 部 脱离 出 来 ， 在 行 定义 、 在 标题 中 定 
义 ， 甚 至 作为 外 部 样式 文件 供 HTML 调用 。 同 时 ， 在 定义 时 也 不 必 考 虑 各 种 浏览 器 的 兼容 
性 ， 因 为 那些 不 支持 CSS 的 浏览 器 能 够 将 CS5 的 样式 定义 内 容 完 全 忽略 。 

通过 CSS 灵活 多 变 的 定义 后 ， 其 所 能 够 指定 的 样式 类 型 除了 通用 的 颜色 、 字 体 、 育 景 
等 样式 之 外 ， 还 可 以 控制 字符 间距 、 填 充 距 、 大 小 写 等 50 个 左右 的 样式 ， 显 示 出 强大 的 定 
义 能 力 。 

浏览 者 想 要 看 的 是 网 页 上 的 内 容 结构 ， 而 为 了 让 浏览 者 更 好 地 看 到 这 些 信 息 ， 就 要 通 
过 格式 控制 来 帮忙 了 。 以 前 两 者 在 网 页 上 的 分 布 是 交错 结合 的 ， 吾 看 修改 很 不 方便 。 而 现 
在 把 两 者 分 开 ， 就 大 大 方便 了 网 页 的 设计 者 。 内 容 结构 和 格式 控制 相 分 离 ， 使 得 网 页 可 以 
单 由 内 容 构 成 ， 而 将 所 有 网 页 的 格式 控制 指向 某 个 CSS 样式 表 文 件 。 这 样 市 来 的 好 处 表现 
在 以 下 两 个 方面 。 

(1 ) 简化 了 网 页 的 格式 代码 ， 外 部 的 样式 表 还 会 被 浏览 器 保存 在 缓存 里 ， 加 快 了 下 载 显 
示 的 速度 ， 也 减少 了 需要 上 传 的 代码 数量 ( 因为 重复 设置 的 格式 将 只 被 保存 一 次 )。 

( 2 ) 只 要 修改 保存 网 站 格式 的 CSS 样式 表 文 件 就 可 以 改变 整个 站 点 的 风格 特色 ， 在 修改 页 
面 数量 庞大 的 站 氮 时 ， 显 得 格外 有 用 。 这 样 就 避免 了 一 个 个 网 页 的 修改 ， 大 大 减少 了 工作 量 。 

Dreamweaver CS6 提供 了 对 CSS 样式 创作 的 完美 支持 ， 利 用 Dreamweaver CS6， 用 户 不 需 
要 了 解 CSS 复杂 烦琐 的 语法 ， 就 可 以 创建 出 具有 专业 风格 的 CSS 样式 。 不 仅 如 此 ， 
Dreamweaver CS6 还 能 够 识别 现存 文档 中 定义 的 CSS 样式 ， 这 蝎 方便 用 户 对 现存 文档 进行 修 
改 。 这 一 节 使 用 循序 渐进 的 方法 领略 CSS 风采 ， 书 中 大 量 的 例子 是 制作 优秀 网 页 的 最 佳 模 
板 。CSS 也 是 一 种 标记 性 语言 ， 建 议 读 者 学 习 本 章 的 同时 ， 一 定 注意 多 上 机 实践 ， 以 达到 良 
好 的 学 习 效 果 。 


3.6.2 层 才 样式 表 的 类 型 


层 亚 样式 表 的 类 型 有 三 种 ， 它 们 分 别 如 下 。 

] . HTML 标记 样式 

第 一 种 最 第 见 的 是 包 售 在 head> 至 人 head> 标 记 里 ， 它 实际 上 是 对 现 有 HTML 标记 的 一 种 
重新 定义 。 当 创建 或 改变 这 类 样式 时 ， 文 档 中 所 有 应 用 该 标记 的 文本 格式 都 会 自动 被 更 新 。 
例如 ， 可 以 利用 CSS 重新 定义 标题 2 标记 <h2> 代 表 的 格式 ， 当 修改 其 格式 定义 时 ， 文 档 中 所 
有 使 用 <h2> 标 记 的 文本 格式 都 会 自动 变化 。 

2。， 目 是 os RN 

它 与 某 些 子 处 理 程序 ( 如 Word ) 中 使 用 的 样式 概念 很 类 似 ， 只 是 不 再 有 字符 样式 和 段落 
样式 的 区 别 。 可 以 在 任何 文本 上 应 用 自 定 义 的 C5S 样式 ， 无 论 该 文本 是 一 个 完整 的 文本 块 
( 例如 一 个 完整 的 段落 或 是 一 个 无 序列 表 )， 还 是 一 个 局 部 的 文本 学 围 ( 例如 在 段落 中 选中 的 
文本 )。 如 果 在 一 个 文本 块 上 应 用 自 定义 的 CSS 样式 ，Dreamweaver (CS6 会 自动 在 文本 块 的 块 
标记 中 添加 class 属性 ( 例如 当 为 一 个 段落 应 用 名 为 mystyle 的 样式 时 ， 可 能 产生 如 下 代 
人 码 : 《<p class 一 “mystyle”> )。 如 果 在 一 个 文本 范围 内 应 用 CSS 样式 ， 则 一 个 包含 了 class 
属性 的 span 标记 会 被 插入 到 文档 中 ， 并 包围 选中 的 文本 。 

3. CSS 选择 器 样式 

它 可 以 对 某 些 特定 的 标记 组 合 进 行 重新 定义 ， 也 可 以 对 所 有 那些 包 合 了 特定 ID 属性 的 
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标记 进行 重新 定义 。 例 如 ， 通 过 定义 h2 em 样式 ， 可 以 使 文档 中 所 有 出 现在 h2 标题 中 带 
有 被 em> 和 <em> 标 记 包 容 的 文字 自动 应 用 该 样式 。 也 可 以 定义 一 个 #mystyle 样式 ， 它 可 
以 应 用 到 所 有 带 有 1D= “mystyle” 属 性 的 文本 上 。 对 文本 的 常规 格式 化 操作 会 覆盖 CSS 样 
式 ， 因 此 ， 如 果 希 望 用 CSS 样式 控制 段落 的 格式 ， 则 必须 删除 所 有 常规 设置 的 HTML 格式 
Be NT ML Te 


3.6.3 ”改造 网 页 的 文本 样式 


现在 开始 用 CSS 样式 来 改造 个 人 网 六 的 外 观 。 在 这 里 ， 更 多 的 是 结合 首页 来 讲解 样式 的 
具体 参数 。 


(1 ) 执行 菜单 栏 上 的 【文件 】 一 【打开 ]】 命 令 ， 在 【 打开】 对 话 框 中 选择 index.asp 这 
个 文档 。 执 行 菜单 栏 上 的 【 修改】 一 【页 面 属性 ] 命令 ,打开 【页 面 属性 】 对 话 框 ， 如 
3—45: Hase 


外 观 [SS) 
页 面 宇 体 灾 ) : | 默认 字体 
大 小 (5): |12 Vpx 区 
文本 颜色 (7): 到 | 00000 | 
背 晤 颜色 (B): [| | 如 FFFFF | 


背 最 图 你 1): 【EEC 
重复 (E): v| 























左边 距 轴 :| | 右边 距 国 :| | 
上 边 距 (p): | | px 下 边 距 (0): 











3-45 打开 【页面 属性 】 对 话 框 


( 2 ) 选择 【分 类 】 选 项 组 中 的 【 外观】 选项， 通过 这 个 选项 可 以 设置 当前 页 面 的 字体 大 
小 、 颜 色 、 背 景色 等 。 
@ 在 【页 面 字体 】 文 本 框 中 保持 默认 值 ， 即 默认 字体 ， 这 样 做 可 以 保持 所 有 计算 机 中 
浏览 到 的 效果 和 本 地 计算 机 设计 的 样式 一 样 。 
@ 在 【大 小 】 文 本 框 中 输入 值 为 12， 单 击 【 大小】 单位 设置 三 角 按钮 缚 ， 在 弹出 的 下 
拉 菜 单 中 选择 像素 ( px )。 
@ 在 【文本 颜色 】 文 本 框 中 输入 值 #000000， 把 页 面 中 所 有 文本 定义 为 黑色 。 
@ 在 【背景 颜色 】 文 本 框 中 输入 值 媳 FFFFF， 把 背景 设置 为 与 图 中 的 图 片 主 色 调 一 致 。 
@ 在 【上 边 距 】 文 本 框 中 输入 值 0。 
( 3 ) 设置 完毕 后 单 击 【应 用 】 按 钮 ， 可 以 看 到 页 面 有 了 变化 ， 显 示 的 问候 语 及 动态 滚动 
的 文字 全 部 统一 为 12 号 ， 效 果 如 图 3-46 所 示 。 
(4) 在 Banner 位 置 输入 链接 的 导航 文字 及 随手 笔记 文字 ， 同 时 把 导航 的 “汽车 相册 ” 
与 image\photoalbum 文件 夹 下 的 index.htm 链接 ， 此 时 “汽车 相册 ” 变 成 赣 色 文字 ， 效 果 如 
3 一 47 所 示 。 
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家 
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名] 欢 黎 Internet 


国 图 3-46 设置 【 外观】 后 的 效果 





| 个 人 简介 | 音乐 最 于 i: 联系 我 们 





:咖啡 象 一 个 极端 自 恋 的 去 人 
, 凶 帮 的 音 味 租 着 在 经 从 各 所 的 :全 Te 
浇 气 后 面 ， 






[a : 惧 拒 还 迎 . 出 而 双 拒 ， 昌 槐 : | 我 的 新 作品 和 
ei : 


:一 日 璋 春 ， 祭 音 也 可 以 总 梁 : 
小儿 .. : 时 六 


Se | 


加 图 3-47 ”输入 导航 菜单 栏 文字 及 随手 笔记 文字 
(5 ) 然后 再 打开 【 页 面 属性 】 对 话 框 ， 单 击 【 分 类 】 选 项 组 中 的 【 链接 】 选项， 通过 这 
个 选项 可 以 对 链接 字体 的 样式 进行 设置 ， 如 图 3-48 所 示 。 

@ 保持 【 链接 字体 】 选 项 的 默认 值 ， 即 同 页 面 字 体 。 

@ 在 【大 小 】 框 中 输入 值 为 12， 单 击 【 大小】 单位 设置 三 角 按钮 六， 在 弹出 的 下 拉 菜 
单 中 选择 像素 ( px )。 

@ 在 【 链接 颜色 】 文 本 框 中 输入 值 放 FFFFF， 把 链接 文本 定义 为 和 白色。 

@ 在 【变换 图 像 链 接 ] 文本 框 中 输入 值 #CCFF33， 指 鼠标 经 过 链接 文本 时 变 成 亮 绿 色 。 

@ 在 【已 访问 链接 ] 文本 框 中 输入 值 #000000， 指 单 击 链接 文本 后 变 为 黑色 。 

@ 在 【活动 链接 ] 文本 框 中 输入 值 #D6739A， 指 活动 的 链接 变 为 指定 的 深 紫 色 。 

@ 单 击 【下 男 线 样式 】 后 面 的 三 角 按钮 六 ， 在 弹出 的 下 拉 菜 单 中 选择 【 始终 无 下 男 
线 】 选 项 。 
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链 抛 字体 民 ); 
去 小 总 1 

访 捷 着 色 人 ): | | 
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(6 ) 设置 完毕 后 


《 同 页 面 字 体 】 
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| | 二 FPFPP | 变故 图 像 居 接 他 ): 属 | CPP 


本 | so00000 活动 刁 搜 心 ): 园 | 8739A 
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设置 的 桩 式 在 页 而 中 已 经 完全 生效 ， 如 图 3-49 所 示 。 
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;咖啡 象 一 个 极端 自 恋 的 女人 : 
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:一 日 弹 奏 ， 余音 也 可 以 绪 梁 ” 
汗 绝 ，. :| 


联系 我 们 } 给 我 人 


vi | 5 


我 的 新 作品 0 


后 单 击 【 确定 】 按 钮 ， 关 闭 该 面板 ， 返 回 到 【 文档】 窗口 ， 可 以 看 到 刚才 


Ma 


国 匈 3-49 


) 执行 菜单 栏 上 的 【文件 】 一 【保存 


1 入 DSS 


设置 样式 后 的 效果 


命令 ， 将 


ee 并 行 浏览 ， 显 示 情 况 如 图 3-50 所 示 。 











LI 明 啡 伴侣 


WO KOFFEE 


侈 ”网 上 好 ,欢迎 来 到 本 站 





i 个 人 简介 : 音乐 最 爱 : 联系 我 们 | 给 我 久 





咖 , —、 
件 咖啡 象 一 个 极端 自 恋 的 妈 
3 人 ， 浓 郁 的 香味 租 蕊 在 华 些 名 提 。 合 -我 的 新 作品 
的 雾气 后 面 ， 和 5 避 计 朋友 去 海南 
的 


之 
i 


入 作品 展示 : 













时 图 3-50 应 用 样式 后 


欲 拒 还 迎 、 迎 而 又 拒 ， 是 抱 
在 脸庞 前 面 的 那 面 故 营 ， 


一 旦 弹 奏 ,余音 也 可 以 秘 梁 ”人 富 -g 
不 绝 ... 


的 网 页 显示 效果 


局 设 为 首页 


该 文档 保存 。 册 按 《F12 〉 键 打开 浏 








站 加 入 收藏 








回 联系 我 们 











这 个 文档 里 然 内 容 没 有 变化 ， 但 是 看 上 去 似乎 已 经 彻底 改头换面 了 ! 但 设计 的 工作 量 并 
不 很 大 ， 仪 仅 改 变 了 样式 文件 里 面 的 一 些 样 式 属性 而 已 ， 从 这 个 例子 中 可 以 看 到 样式 赋予 设 
计 者 的 巨大 灵活 性 。 


3.7 其 入 Flash 动画 


通过 上 身 几 三 的 学 习 ， 已 经 能 够 轻松 完成 裔 态 的 个 人 网 六 部 分 。 接 下 来 是 最 精彩 的 部 
分 ， 即 加 入 Flash 动画 计 侣 个 网 员 “ 动 ”起 来 。 


3.7.1 Flash 基本 界面 
首先 一 起 来 简单 了 解 一 下 Flasn。Flash CS5 界面 如 图 3-51 所 示 。 











FL 文件 ”编辑 (E) ”视图 (V) 插入 D 修改 (M) 文本 (T) 命令 (C) ”控制 (0) ”调试 (D) 窗口 (W) ”帮助 (H) | | 基本 功能 | |D | Gcsive 7 (cle 





播放 器 : Flash Player 10 
脚本 : Actionscript 2.0 


{ 园 | 配置 文件 : 默认 文件 
是 AIR 设置 编辑 .… 
= 2 


ActionScript 设置 





大 小 : 550 x 400 像素 
舞台: [ | 





5WF 历史 记录 
LB 志 | [清除 | 





Vv 国 se 国 SNv PGMhONVSASLDE/ ITVE7| 





瑟 图 3-51 Flash CS5 界面 


3.7.2 Flash Banner 的 使 用 


在 网 页 中 应 用 Flash Banner 已 司空 见 惯 ， 它 的 设计 目的 只 有 一 个 ， 那 就 是 豚 引 浏览 者 的 
视线 ， 让 这 个 广告 达到 最 佳 的 效果 。 一 般 的 Flash Banner 需要 在 Flash 软件 中 进行 专业 的 设 
计 ， 发 布 后 以 .swf 格式 的 文件 直接 著 入 到 网 页 中 。 本 小 节 就 将 用 Flash CS5 完成 一 个 Banner 
动态 广告 设计 并 其 入 到 Dreamweaver CS6 的 网 站 首页 设计 中 。 

Flash Banner 制作 步骤 如 下 。 

(1 ) 打开 Flash CS5， 执 行 菜单 栏 中 的 【文件 】 一 【新 建 】 命令， 打开 【新 建文 档 】 对 
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(OO 
CI 话 框 ， 在 【 常规 】 选 项 卡 中 选择 【 ActionScript 2.0 ]， 如 图 3-52 所 示 。 


pp 类 型 加) : 描述 m): 


-一 - 在 Flash 文档 窗口 中 创建 一 个 新 的 FLA 文件 ep fa)。 
TY 将 会 设置 ActionScript 2.0 的 发 布设 置 。 使 用 FLA 文 
pd | Adobe Flash Player 发 布 的 SWF 文件 的 媒体 


ActionScript 3.0 类 
ActionScript 3.0 接口 
ActionScript 文件 
ActionScript 通信 文件 
Flash JavaScript 文件 
oy 中 |] Flash 项 目 


了 厅 轩 轩 团团 








国 图 3-52 设置 【新 建文 档 】 对 话 框 


) 单 击 【 确定 】 按钮， 创建 一 个 空 的 文档 ， 如 图 3-53 所 示 。 


| 文件 (有 ”编辑 (E) 视图 (V) 插入 (1 修改 (M) ”文本 (T) 命令 (C) ”控制 (0) 调式 (D) 窗口 (W) 帮助 (H) | | 天 能 vY|[ 万 |] Ocw Ge 














播放 器 : Flash Player 10 
脚本 : Actionscript 2.0 


















































“| 





之 5 轩 sse 故 SH PGNW KOS SNLD /I CH 








国 图 3-53 创建 的 新 文档 








) 单 击 【 属性 检查 颖 】 面 板 中 的 【大 小 】 编 辑 按钮 或 者 按 《Ctrlty》 组 合 键 ， 打 开 
Wy 设置 对 证 框 ， 在 【 尺寸】 文本 框 中 输入 【( 宽度 )】 为 479 像素 ,【( 高 度 )】 输 入 
为 80 像素 ， 背 景 为 自 色 ， 其 他 你 持 默 认 设 置 ， 如 图 3-54 所 示 。 
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尺寸 (中 [479 像素 《宽度 六 [30 像素 | 《高 度 ) 


标尺 单位 (R); 像素 | 了 | 区 本 :点 认 (E) 
〇 内 容 (0) 
O 打印 机 (P) 


背景 颜色 :| ] 





及 为 驮 了 冰 值 (M) 





国 图 3-54 设置 【文档 设置 】 对 话 框 





7 之 兼 职 指导 
Banner 的 大 小 设置 是 由 网 页 设计 的 Banner 图 片 大 小 所 决定 的 ， 本 例 误 入 的 Banner 图 片 
大 小 为 479x80 像素 。 


( 4 ) 设置 完成 后 ， 单 击 【 确定 】 按钮， 建立 一 个 Banner 空白 文档 ， 如 图 3-55 所 示 。 


FL 次 ( 月 三 绢 [四 视 要 (由 播 太 作 。 情 改 (M) 六 本 [T。 窗 守 (Cj 控 旺 DO) 请 坛 [D) 宣 口 (W) 种 助 H) | | 其 在 功 赐 ”| 万 | Os uw 基因 医 辐 


未 羡 才 .1 国 一 产品 一 一 一 一 
训 疾 | 
加 未 命名 :1 


区 | 
队 





迫 





播放 器 : Hlasb Player 10 





9 请 志 : Actionseript 20 
所 pF 
二 | 展 轩 文件 : 默认 妆 件 
AR 设 性 。 | 声 山 -| 
| 可 全 
ww 属 二 > 
4 PS 2 
支 小 : 79x 时 他 这 [强生 | 只 
大 首 :[ | 
"SWF 所 晤 记 节 
[ 日志) |_ i | 


习 
Ft 
卫 
党 


可 = FT EIR TTT 








了 15 C9 30 35 特 50 55 坟 | 蜂 ™m 75 证 


二 
J Mt 





国 图 3-55 ”建立 的 Banner 空白 文档 


) 执行 菜单 栏 上 的 【文件 】 一 【 导入】 一 【导入 到 舞台】 命令 ， 打开 【 导入】 对 话 
框 ， ne Tagsc1aoif 如 图 3-56 所 示 。 

) 单 击 【 打开 】 按 钮 ， 则 所 有 的 图 片 全 部 导入 到 Flash 的 【文档 】 窗 口中 ， 并 且 所 有 
本 顺序 又 加 在 一 起 。 按 《Ctrl+L》 组 合 键 打 开 【 库 】 面 板 ， 可 以 看 到 导入 的 图 片 在 
【 库 】 面 板 中 ， 如 图 3-57 所 示 。 


895 
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| 蝇 计算 机 


鳃 本 地 磁盘 (C:) 
E 本 地 磁盘 (D:) 
GB 本 地 磁盘 (E:) 
号 本 地 磁盘 (F;) 
es 可 移动 磁盘 (H:) 


images_11 images_12 





合 网 络 


文件 名 (N): images_13 








国 图 3-56 ”选择 要 导入 的 图 片 


| er | |] Ocuw ，E 太 大 台 
. 于 于 


= |。 交 本 [RF。 油 鸡 [E) 视 台 Vj 折 AJI) 二 酌 [M) 误 吉 [站 二 他 [CI 仿 制 [0) 汉 址 Di 万 DW 昌 M[H) | 

















时 间 灿 | 





| 硬 面 了 机 Ee | 


国 图 3-57 导入 的 图 片 效 果 
司 轴 】 上 的 图 层 1 第 30 帧 ， 按 《F5 》 键 插入 相同 帧 ， 时 间 轴 








( 7 ) 用 鼠标 单 击 选择 【 时 





效果 如 图 3-58 所 示 ， 表 示 动 国 播 放 的 时 间 为 30 帧 的 长 度 。 





时 间 轴 








图 图 3-58 建立 相同 帧 


( 8 ) 单 击 【 时间 轴 】 上 的 【 新建 图 层 】 同 按钮 ， 新 建 【图 层 2 】 此 时 的 图 层 2 与 图 层 1 一 请 


样 自动 生成 30 帧 ， 如 图 3-59 所 示 。 图 层 2 是 用 来 放置 文字 对 象 ， 图 层 ] 的 背景 是 不 变 的 。 


中 








证 甸 宇 曙 [Wp 42s5 车 | 
国 图 3-59 ”建立 【 图 层 2】 
( 9 ) 执行 菜单 栏 中 的 【插入 】 一 【 新建 元 件 命令 或 者 按 (Ctrlt+F8) 快捷 键 插入 一 个 


影片 ， 在 弹出 的 【 创建 新 元 件 】 对 话 框 中 的 【名 
称 】 文 本 框 中 输入 text， 在 【类 型 】 下 拉 列 表 项 





i Eee 


Se | 





中 选择 【 影片 剪辑 】 选项， 如 图 3-60 所 示 。 类 型 (T): [ 影片 画 辑 |v] 
文件 夹 : 库 根 县 录 
YY 兼职 由 导 : 高 级 ， 
在 Flash 当中 ， 要 把 制作 成 的 动画 对 象 转 换 
成 影片 剪辑 或 者 是 图 形 行为 组 件 才 可 以 实现 动画 画图 3-60 ”新建 影片 text 


的 编辑 。 有些 组 件 还 需要 命名 或 者 是 加 入 脚本 动作 命令 才 可 以 实现 。 


( 10 ) 单 击 【 确定】 按钮 进入 text 的 编辑 文档 窗口 ， 如 图 3-61 所 示 。 


FI。 误 伍 [ 癌 。 曼 博 [EJ。 匡 加 (VI 御 入 人 二 攻 IMI 袜 入 [Ti 瘟 寻 口 。 控 后 IO 请 5ID 宝 日 Wi 本 EM | | 者 本 记 = | 三 | 如 un “= 基因 区 司 | 











75 国 s* 国 SE PGS WTS Nu eo” 



























































i 理 晤 了 RB Hl 





加 图 3-61 进入 影片 剪辑 编辑 窗口 


(11 ) 单 击 工具 箱 中 的 【文字 工具 加 | 按钮， 在 text 第 1 巾 中 输入 文字 “The coffee' 
season of love...”， 在 文字 属性 栏 中 可 以 设置 文字 的 字体 及 大 小 ， 这 里 设置 字体 为 Informal 
Roman， 字 号 为 16， 其 中 第 一 个 字母 放大 一 些 为 34， 如 图 3-62a 所 示 ， 3 一 62b 所 示 为 设 
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过 
> 


三 | 
= 


匆 卉 三 网 却 

















号 闻 符 
系列 : [Informal Roman 网 


字母 间距 : 0.0 
颜色 : [|] 区 自动 调整 字 距 
消除 所 上 : [可 这 性 消 际 党 Fe coffee'sea son of tove,... 


b) 














国 图 3-62 设置 文字 大 小 及 样式 

( 12 ) 由 于 图 层 1 是 暗色 调 ， 需 要 把 这 些 文字 调整 为 白色 ， 先 把 文字 的 颜色 变 成 白色 ， 
然后 单 击 国 到 回 到 主场 景 ， 从 【 库 】 和 面板 中 ， 把 text 影片 剪辑 拖 入 到 主场 景 中 的 图 层 2 
上 ， 效 果 如 图 3-63 所 示 。 








屿 图 3-63 拖 入 文字 效果 


( 13 ) 接 下 来 开始 制作 动画 ， 分 别 在 图 层 2 的 第 1、4、6、7、8、9 帧 按 《F6， 键 ， 插 入 
关键 帧 ， 此 时 时 间 轴 如 图 3-64 所 示 。 


时 间 轴 








国 图 3-64 加 入 关键 帧 


| (14 ) 在 第 1 帧 选中 text， 执 行 菜单 栏 中 的 【窗口 ] 一 【 缩放】 命令 或 者 按 (Ctrl+T》 

调 出 【 变形 】 面板 ， 设 定 纵 横 缩 放 比 都 为 10%。 面 板 设 置 如 图 3-65 所 示 。 

( 15 ) 按照 第 14 步 的 操作 ， 在 第 4 帧 选中 text， 在 【 变形 】 面 板 中 设 定 纵 横 缩放 比 都 为 
500%。 

( 16 ) 同样 在 第 6、8 帆 中 选中 text， 分 别 在 【 变形 】 面 板 中 设 定 纵横 缩放 比 都 为 200%。 

(17 ) 同样 在 第 7、9 帆 中 选中 text， 分 别 在 【 变形 】 面 板 中 设 定 纵横 缩放 比 都 为 110%。 

( 18 ) 用 鼠标 单 击 第 3 帧 ， 单 击 鼠标 右键 在 弹出 的 菜单 选项 中 选择 【 创建 传统 补 间 ] 命 
令 ， 在 【属性 检查 器 】 面 板 中 设置 如 图 3-66 所 示 内 容 。 
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Cw 3 YY 4 


国 图 3-65 缩小 文本 大 小 比例 国 图 3-66 设置 动画 及 完成 的 时 间 轴 


( 19 ) 执行 菜单 栏 中 的 【文件 】 一 【保存 】 人 命令， 打开 【 另存 为 】 对 话 框 ， 将 文件 保存 
本 images 文件 夹 下 ， 并 命名 为 banner.fla 文件 ， 如 图 3-67 所 示 。 

( 20 ) 然后 执行 菜单 栏 中 的 【文件 】 一 【 发布】 命令 ， 在 保存 的 同一 路 径 下 生成 一 
名 的 banner.swf 格式 文件 ， 如 图 3-68 所 示 为 显示 效果 。 





~ 四 让 此 国 " 

修改 日 期 
2011/3/22 15:30 
2011/3/22 15:30 








4 | 川 | 





文件 名 :banner 
保存 类 型 0): [Lash CS5 文档 ka [了 省 于 





国 图 3-67 保存 文件 国 图 3-68 滚动 海报 的 效果 


( 21 ) 最 后 把 生成 的 banner.swf 文件 散 入 到 网 页 中 ， 打 开 Dreamweaver CS6 ， 打 开 
人 
一 【Flash 】 命 令 ， 打 开 【 选择 文件 】 对 话 框 ， 如 图 3-69 所 示 。 选 择 刚才 制作 的 Flash 文 
件 ， 然 后 单 击 【 确定 】 按 钮 ， 这 样 就 完成 了 动态 Flash Banner 的 设计 与 导入 操作 。 

利用 Flash 开发 制作 出 来 的 Banner 具有 动态 效果 ， 在 整个 网 页 中 最 为 抢眼 。 在 个 人 网 站 
建设 中 ， 如 果 能 合理 地 利用 Flash， 可 以 制作 出 更 加 吸引 人 的 网 页 效果 。 完 成 的 整个 主页 效果 
如 图 3-70 所 示 。 
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保存 在 区 ): 用 chap03 
”| 让 


”全 个 卢 回 - 
修改 日 其 





了 四 z 加 = 
近 访 问 的 位 置 地“ 
私 banner 


全 - | banner 


2011/3/22 15:30 


2005/9/21 9:21 
2011/3/25 14:44 





| * | 


a } 








banner 


| 
| 文件 名 08: 
保存 类 型 CT): 


所 有 文件 Ca 


A 
"DROe™ sl 
全 ®» 























90 





Unicode 标准 化 表单 全): 







咖啡 伴侣 
' KOFFEE 








上 “( 却 沁 外 朋 耶 ， 后 昭 规 革 ; 合成 )| 
回 包 括 Unicode 签名 (Go (5) 





国 多 3-69 村 入 Flash 












v | ”| 新 建站 点 ... 


站 点 根 目录 





| 加 设 为 首页 
[四 加 A 收 藏 | 


固 联系 我 们 








音乐 最 爱 联系 我 们 给 我 留言 
随手 笔记 一 ) 太一， 最近 更 新 
咖 哇 象 一 个 极端 自 恋 的 玄 | TARJTIIFRR 
人 ， 浓 郁 的 香味 租 蕊 在 些 些 各 名 。 富 --S 扣 请 朋友 去 海南 
的 要 气 UH; [= 心情 日 记 
欲 拒 还 迎 、 迎 而 又 拒 , 是 抱 
”在 脸庞 前 面 的 那 面 瑟 琵 ， 
一 旦 弹 奏 ,余音 也 可 以 绕 梁 ” 富 - 
涉 和 os Cm )| 
AS a 








3.8 ”网 站 的 上 传 及 配置 


个 人 网 站 建 


ET 
]J 芭 元 


后 ， 


需要 上 传 到 服务 器 才 可 以 被 浏览 者 访 


屿 图 3-70 Flash Banner 的 应 用 效果 


可 。 这 个 过 程 水 及 很 多 细 广 





上 的 操作 ， 主 要 包括 网 站 域名 解析 和 和 网 站 上 传 。 域 名 解析 在 第 1 草 已 经 介绍 过 ， 这 里 重点 介 


绍 上 传 配置 。FlashFXP 是 一 款 功 能 强大 的 FXP/FTP 软件 ， FlashFXP 使 用 简单 ， 并 且 有 汉化 
版 。 本 文 介绍 FlashFXP 最 基本 的 功能 ， 设 置 站 点 并 上 传 网 站 。 操 作 步 又 如 下 。 
(1 ) 下 载 该 软件 ， 安 和 后 打开 FlashFxp 软件 ， 如 图 3-71 所 示 。 


人 上]1ashFXPE 国 回 四 


BTP 站 点 人 @) 选项 @) 队列 和 @@) 命令 CC) 工具 (1) 目录 名 ) 查看 如 帮助 
HIXN 全 允 四 - 


壳 号 | 忆 FlashfxP 实 配 | 
名 称 大 小 | 类 型 六 | 名 称 ， 大 小 | 更 吹 日 期 | 属性 
他 .上 级 目录 

加 汉化 文件 来 
|$]02-02-05_20. 30. 35. 918838. faf 31 EB FlashFXP Documt 
| 型 ] Boolmarks. dat 0 DAT 文件 本 
上 自 debuge. log 33 三” 净 本 站 档 

自 errorlog. txt 365 ”总 本 鼠 档 
-FlashFxp. ini 1 到 配置 设置 

名 FlashFXP. chnm 878 二 已 编译 的 HTML i 
三 Fl1ashFXF. exe 1.57 是” 应 用 程序 

便 ]FLashFXP Website. URL 48 ”Internet 快捷 方 
贺电 ashfxp. key 1 开 亚 Y 文件 YY 
< | > 


1 个 交 件 夹 ,29 个 交 件 ,总计 30 (4.89 呈 /6.07 968 空间 ) 















































名 称 | 目标 大 小 | 备注 





Winsock 2.0 








图 3-71 打开 的 FlashFXP 软件 


2 ) 执行 菜单 栏 中 的 【 站 点 】 一 【站 点 管理 器 
理 右 】 对 话 杠 ， 如 图 3-72 所 示 。 
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mw | | 

用 户 儿 称 中 | | 口 臣 名 扣 ) 
SU 

zo | 


川 FaaeaC 加 


注 拜 器) 


3-72 【站 点 管理 器 】 对 话 框 
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对 话 框 ， 在 【 站 和 点 名 称 】 文 本 框 中 输入 站 扣 名 称 如 
,newsite， 如 图 3-73 所 示 。 FE 





3 ) 单 击 【 新 建站 点 】 按 钮 ， 打 开 【 创建 新 的 站 点 】 


站 点 名 称 














) 单 击 【 站 点 管理 器 】 对 话 框 上 的 【常规 】 选 
【站 点 名 称 】 已 经 自动 设置 为 上 一 步 又 定义 的 站 点 名 网 
称 ， 在 【IP 地 址 】 栏 输入 网 站 指向 的 IP 地 址 ， 在 【 端 目 图 3 73 【建立 新 的 站 二 对 语 


| 口 】 文 本 框 中 输入 端口 值 一 般 为 21， 在 【用户 名 称 】 文 本 框 中 输入 登录 服务 器 的 名 称 ， 在 
“【 密 码 】 文 本 框 中 输入 密码 ， 然 后 单 击 【 应 用 】 按 钮 ， 站 点 就 设置 完成 ， 如 图 3-74 所 示 。 


EE 


io 人 | 守山。 | 选项 | 高 级 | ssSL_ | 书签 “| 统计 
desl enem 3 - 
加 ftp. byedu. org 站 点 名 称 他 ] |newsite | 
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= | 本 地 路 径 谍 ) 国 

注释 代 ) 
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国 图 3-74 设置 【常规 ] 选项 卡 


5 ) 单 击 【连接 】 按 钮 ， 就 可 以 连接 站 点 。 0 在 0 
站 点 目录 ， 选 中 要 上 传 的 所 有 站 点 文件 ， 然 后 单 击 鼠标 
送 ] 命令 ， 上 传 网 站 就 这 样 轻 易 实现 了 ， i 





FliahF 人 FP 
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3 M5 i nein 0 Ms-5 3 5 
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a el 7 
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击 可 玄 圩 高 碟 1 EtrTtisa 


市 业 三) | 





国 图 3-75 上传 操作 效果 


使 用 同样 的 方法 ， 选 中 远程 空间 中 的 文件 或 者 文件 夹 ， 单 击 鼠 标 
单 中 选择 【 传送 】 人 命令 ， 就 可 以 下 载 到 本 地 。 
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兼职 接收 项 目的 时 候 会 友 现 ， 一 般 客 尸 基本 上 都 
会 要 求 市 有 会 员 系 统 ， 本 章 束 主要 介绍 市 会 员 管 理 系 
统 型 网 站 的 建设 。 作 为 一 个 大 型 一 点 的 网 站 会 员 管理 
系统 是 必要 的 。 通 过 注册 信息 的 统计 一 不 但 可 以 了 解 
到 网 站 的 浏览 情况 ， 还 可 以 通过 用 己 的 权限 设置 实现 
页 面 的 浏 丰 权限 设置 功能 。 一 个 会 员 管理 系统 ， 一 般 
应 该 拥有 用 户 注 册 功 能 、 资 料 修改 功能 、 取 回 密码 功 
能 及 用 户 注销 身份 等 功能 。 


个 理 - 硬 国 国 眙 月 村 击 ws 夺目 加 局 -党国 -加 般 电 


ls el lls ke sg 




















er 


四 fe 利生 汪 生 + 划 字 二 天守 年 十 主 轩 用 芝 = 
回 i 和 导 本 态 汗 科 中 计量 肝 本 天 吓 丰 1 ie" 
[i 


加 古本 二 ms 下 村 再 短 主 明示 削 十 并 晤 后 

[| 

[| 

[a ol 

面 于 MI 要 国信 员 吉本 各 。 开 二 本 
出 厂 到 肥 十 aso ; 国 丑 和 全 庙 寺 部 轩 军 讽 只 种 
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4.1 市 会 员 系 统 网 站 设计 


对 于 一 个 会 员 型 网 站 来 说 ， 在 技术 上 体现 为 会 员 管理 系统 的 设计 与 制作 。 本 章 用 技 飞 教 
己 | 学 网 的 会 员 管理 系统 来 说 明 会 员 型 网 站 的 动态 核心 部 分 技术 的 开发 思路 与 方法 。 该 网 站 的 首 
一 | 页 效果 如 图 4-1 所 示 。 
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口 、 卓 二名 师 尼 二 全 人 琴 5 下 各 要 采 洪 瞻 梁 自 革 久生 
口 广州 逢 号 3005 二 1 月 面 志 星 主题 感 南 电 子 业 时 
口 ”上河 十 自考 医 半 后 性 一 环 及 晴 滞 这 本 而 
回潮 基 机 竺 是 下 书 可 全 自生 二 精 
掉 葡 课 如 ;sms 
口 泣 MI 赤 册 旺 机 加 类 罚 ， 
的 六- 间 原作 sps > 克拉 TT 








力图 4-1 网 站 的 首页 效果 


4.1.1 网 站 功能 结构 分 析 


技 飞 教学 网 网 站 主要 是 一 个 计算 机 教学 网 ， 通 过 学 员 的 在 线 注册 实现 对 学 员 的 统一 管 
理 。 在 网 站 的 首页 设置 了 新 闻 、 诚 征 代 理 等 栏目 ， 这 些 都 是 静态 的 链接 页 面 功 能 。 网 站 搭建 
了 如 下 的 几 个 导航 荣 单 ， 如 图 4-2 所 示 。 
@ 技 飞 首页 
@ 最 新 消息 
学 生 作 品 
关于 我 们 
留言 板 
网 站 论坛 























和 图 4-2 设计 的 导航 菜单 
网 站 中 的 关键 部 分 即 学 员 的 注册 与 登录 放 在 网 站 页 面 的 左边 框 上 。 作 为 一 个 会 员 售 理 系 


统 ， 主 要 用 到 了 创建 数据 库 和 数据 库 表 、 建 立 数据 产 连 接 、 建 立 记 录 集 、 创 建 各 种 样本 页 、 
添加 重复 区 域 来 显示 多 条 记录 、 页 面 之 间 传 递 信息 等 技巧 和 方法 。 这 些 功 能 的 实现 将 在 后 面 
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的 实例 中 进行 详细 的 介绍 。 而 留言 板 、 网 站 论坛 等 动态 栏目 将 在 后 面 的 实例 章节 中 进行 具体 
的 介绍 


4.1.2 ”页面 设计 规划 


从 上 面 的 导航 菜单 出 发 ， 在 本 地 站 点 上 建立 站 点 文件 夹 site。 制 作 后 的 网 站 中 建立 的 二 
0 


| 交尾 证 1 一 于 看 贞 。” 茧 醒 有 工具 石 | 用 二 1 
登 EE =- 癌 -人 | 
三 址 亚 1 本 Db Lunt 


至 赃 草 谱 加 真 起 英 


癌 一 TW 
二 析 这 个 广 时 内 腕 到 


向 污 可 此 六 首 列 





是 图 4-3 ”站 扩 规 划 文 件 


网 站 静态 部 分 页 面 主 要 通过 Photoshop CS5 进行 设计 ， 在 光盘 素材 中 也 有 该 网 站 首页 的 
美工 设计 效果 。 其 中 的 一 些 静态 页 面 在 Dreamweaver CS6 中 经 过 排版 设计 就 可 以 实现 。 下 面 
分 别 介绍 各 页 面 的 功能 。 

(1 ) index.asp 页 面 是 这 个 网 站 的 首页 ， 输 入 网 站 的 域名 后 首先 打开 的 就 是 该 网 页 。 

(2 ) news.htm 页 面 是 新 闻 页 面 ， 如 图 4-4 所 示 。 该 页 面 的 新 闻 标 题 是 静态 链接 。 
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国 图 4-4 新 闻 页 面 效果 





( 3 ) works.htm 页 面 是 学 生 作 品 
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图 站 建设 作品 


[2 


总 单 而 设计 作品 


栏目 页 面 ， 效 果 如 图 所 示 。 该 
页 面 主 要 是 调整 了 Banner 的 图 片 效 
果 ， 加 入 学 生 作 品 展 示 ， 这 样 设计 
是 为 了 防止 网 站 浏览 者 感到 视觉 疲 
邦 ， 不 同 的 网 页 用 不 同 的 Banner 是 
非常 必要 的 。 











国 图 4-5 学 生 作 品 页 面 效 果 
(4) about.htm 页 面 是 关于 我 们 栏目 
页 面 ， 设 计 的 效果 如 图 4-6 所 示 。 
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大 图 4-6 关于 我 们 页 面 设计 效果 
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(5 ) guestbook.htm 是 留言 板 页 
面 ， 效 果 如 图 所 示 。 留 言 板 的 
设计 属于 动态 部 分 建设 ， 选 择 不 同 
的 建站 语言 开发 的 模式 也 是 不 一 样 


的 ， a 入 计 方 法 将 在 下 一 划 实 
例 中 进 
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国 图 4-7 留言 板 页 面 效果 





( 6 ) BBS 导航 只 是 一 个 简单 的 链接 ， 通 过 链接 指向 的 是 一 个 其 他 网 站 的 论坛 。 对 于 一 
小 型 企业 来 说 ， ee 费用 往往 会 很 高 ， 通 过 下 载 使 用 免费 的 区 
系统 ， 同 样 可 以 实现 这 样 的 功能 。 

本 太 有 的 页 面 基 本 上 是 静态 页 面 ， 是 使 用 Photoshop CS5 进行 各 页 的 美工 设计 ， 最 后 用 
Dreamweaver CS6 进行 编排 而 成 。 具 体 方 法 在 此 不 做 介绍 ， 读 者 可 以 打开 整个 网 站 进行 参考 。 


4.2 ”用 户 系统 数据 库 设 计 Wl 


本 帮主 要 芝 握 使 用 Access 建立 数据 库 和 和 表 的 方法 以 及 数据 库 的 连接 方法 ， Re 
态 网 站 建设 的 第 一 步 。 会 员 管理 系统 首先 要 设计 一 个 存储 用 户 注册 资料 的 数据 库 文 件 。 这 
设计 并 制作 一 个 Access 数据 库 ， 在 后 而 的 实例 当中 能 够 实现 用 户 名 、 密 码 等 资料 的 添 pe 


4.2.1 用 户 数 据 库 设计 证 = 


本 实例 需要 一 个 主要 用 来 存储 用 户 注册 的 注册 名 、 密 码 及 一 些 个 人 信息 如 性 别 、 年 龄 、 
E-mail、 电 话 等 的 Access 数据 库 。 所 以 ， 在 数据 库 中 必须 包含 一 个 容纳 上 述 信息 的 表 ， 这 个 
表 称 为 用 户 信息 表 ， 并 命名 为 user。 创 建 的 用 户 信息 表 如 图 4-8 所 示 。 


Eh 可 汪 对 上 由 US = FAienosalt Mocs - 丙 各 
= - 
并 沿 合计 。 外 入 秆 后 。 区 拱 率 本 具 | 设计 浪 = | 


定 吕 属性 


下 各 停电 长 有 到 G4 个 守 窟 [相持 亨 习 |， 控 
也 峡 吕 前 加 有 有关 定 启 名 将 部 和 阁 助 ， 


ET 及 = 则 婴 。 1 TY 





国名 4-8 创建 用 户 信息 表 


数据 库 设计 的 步骤 如 下 。 
创建 数据 库 的 第 一 步 是 根据 要 制作 的 网 站 将 要 面 对 的 访问 者 做 一 个 调查 分 析 ， 对 于 
企业 网 站 的 拥有 者 需要 了 解 访 问 者 的 情 痪 。 
2 ) 根据 第 一 步 的 调理 分析， 设计 数据 库 中 表 user 的 字段 结构 采用 如 表 4-1 所 示 的 
结构 。 
97 





98 





"| 涡 


主题 编号 


用 户 账 号 


用 户 密码 


真实 姓名 
用 户 性 别 
邮箱 地 址 


题 答 案 


用 户 权 限 


。 单 击 【 新 建 空白 数据 库 】 选项 ， 


后 单 击 【 文件 名 ]】 


表 14- 


| 


1 用 户 数据 设计 表 


ES T 
ES ER 


兴 友 站 失 提示 问题 WT EE ED 


密码 提示 问 


we | | 
my | mr | Rm | 


( 3 ) 接 下 来 在 Microsoft Access 中 实现 数据 库 的 搭 


如 图 4-9 所 示 。 


人 
时 | 时 | 对 | 于 | 时 | 时 | 时 | 时 


建 ， 首 先 运行 Microsoft Access 程 





cs | Microsoft Access 

3] 

模 二 蔚 别 = \ 
i EE Microsoft Office Access 


| “新建 空 自 激 秀 浊 


吝 碍 贡生 
好色 联检 棋 析 





国立 4 一 9 
后 面 的 浏览 按钮 ， 


文件 困 建 数据 上 
保存 位 置 GD) 
方 实生 近 的 立 档 

轩 上 而 
回廊 藻 
最 我 的 电 及 


和 同上 条 居 


文件 名 加 We 和 
保存 区 型 GD): | eroroft 0ff 


CEA55 2007 琢 
亩 加 玉 测 四 2 Pe 好 划 rr 下 要 
尼 闻 三 的 驴 民 胖 二 信里 
此 | 
企 二 7 Miaoros ni rpm 鸭 区 但 量 


iee Accets 2002-2003 数 尖 座 ( 


mdb) 


了 由 本 二 1 












二 








空 自 数 据 库 
健生 多 合 妈 何 车 要 于 洁 焉 村 委 的 Wierosaft 
Office Accatg 台 类 庚 。 








蛮 浸 人 5 













Cae ] [_ Wm | 


新 建 Access 数据 库 


打开 【文件 新 建 数 据 库 】 对 话 框 ， 在 文件 名 
i 名 user.mdb， 单 击 【 确定 】 按 钮 ， 如 图 4-10 所 示 。 


国 图 4-10 设置 【文件 新 建 数 据 库 】 对 话 框 


(5 ) 接 下 来 创建 表 的 字段 ， 单 击 【 创建 】 按 钮 在 Access 中 建立 一 个 空 的 文件 
user.mdb， 如 图 4-11 所 示 。 


ea 玩 避 -六 日 过 工具 User : 数据 库 (Access 2002 - 2003 文件 福 式 | - Microsoft Access 而 
开始 创建 ”外 局 数据 汝 所 库 工具 监 担 过 面 


Be 到 Ee : 二 人 数 振兴 上: 和 二 顺 


图 新建 仅 。 汪 加 查 沈 关系 ”对 旬 
没有 字 全 吉村 i | 量 沁 眶 关 性 
| _ 视 加 字 芯 和 列 数据 法 盟 和 格式 关于 


记 可 :4 二 1 项 ( 共 1 项 | 和 HL | 也 无 计生-| 盾 蛇 。 





各 图 4-]]1 建立 的 数据 库 


6 ) 用 鼠标 
选择 【 设计 视图 命令 ， 打开 】 对 话 杠 保存 | 末 称 四 
es user， 如 图 4-12 所 示 。 区 
) 单 击 【 确定 】 按 钮 ， 按 表 4-1 输入 字段 名 并 设 
是， 完成 后 如 图 4-13 所 示 。 




















国 user 7 
“而 国 
username 
“password 文本 
truename 文本 
| SEX 文本 
Email 文本 
Question 文本 
Bnswer 文本 
Buthority 数字 


字段 硬性 








字段 名 称 最 长 可 到 64 个 字符 [包括 空格 )。 按 
FL 缸 可 坦 看 有 关 字 段 名 称 的 帮助 。 

















图 4-13 创建 表 的 字段 并 设置 属性 


7 兼职 指导 : 

这 里 要 创建 一 个 主键 值 ， 主 键 值 是 在 建立 的 数据 库 中 建立 的 唯一 一 个 真实 值 ， 数 据 库 通 
过 建立 主键 值 ， 方 便 后 面 搜索 功能 的 调用 ， 要 求 所 产生 的 数据 没有 重复 。 操 作 方 法 是 选择 这 
一 行 的 值 ， 单 击 筷 标 右键 ， 在 打开 的 菜单 中 选择 【 主键】 命令， 如 图 4-14 所 示 。 








Us6 


国 user 四 Xx 
> EC 四 





ID 一 一 一 一 
usernanme | * 三 兴 [&) 


























password 此 - | 
truenanme |,、 
pe 5 起 复 制 (O) 文 ER 
Email 有 补贴 尼 文本 
Question | 3 搬入 行 四 文本 
Answer > 和 六 本 
Authority 三 晋 除 行 吕 ) 数字 
“AN 和 牛 成 宫 (B).. v 
可 二 一 一 字段 尾 性 
| 层 性 (D) 
| 守 规 刘 阅 
字段 大 小 长 莹 型 
新 值 递 首 
格式 
标题 
索引 有 (有 重复 ) 
智能 标记 晤 
文本 对 齐 常规 字段 名 称 最 长 可 到 64 个 字符 (包括 空格 ]。 按 


FI 链 可 宜春 有 关 字段 名 称 的 帮助 。 











ee 











国 移 4-14 创建 主键 人 





(8 ) 为 了 预览 方便 ， 可 以 在 数据 库 中 预 移 编 辑 一 些 记 录 对 象 ， 其 中 “小 王 ” 用 户 的 权限 
( 即 Authority 字段 ) 值 为 1， 即 为 管理 员 ， 其 余 用 户 权限 值 为 0， 即 为 一 般 用 户 ， 如 图 4-15 
所 不 。 





国 user 中 Xx 


re 


ID ~ usernam ~ SMW truEnz v |， SEX ~ Email ~ Question "Ansy vautholv 版 如 荔 苑 捐 
国 1 小 王 123456 | 王 亚 飞 。” 男 wans@hotmail. con 我 的 职业 是 什么 ? 董事 长 





1 
2 者 张 111111 张 振 兴 劝 zhane@hotmail. co 我 的 家 多 在 哪里 ? 福建 省 0 
3 叶子 222222 | 叶 田 田 | 女 tiantian@hotmail 我 最 喜欢 的 动物 ? 小 马 鱼 0 
5 咖啡 伴侣 “123456 咖啡 ra designem@163. com 叫 什 么 和 名字 ? 咖 嘲 0 
建 ) 0 
| 记录 : 《1 第 1 项 共 4 黄 | * M 彤 | 系 无 管 渤 丢 | 搜索 





4-15 ”user 表 中 的 输入 记录 





3 兼职 指导 : 
在 该 数据 库 中 ， 通 过 性 别 字段 中 的 “sex” 中 直接 输入 “ 男 ” 或 “ 女 ” 来 存储 用 户 的 性 
别 信息 。 这 样 做 的 目的 是 为 使 数据 库 的 结构 更 加 简单 ， 而 对 数据 库 的 大 小 基本 上 没有 影响 ， 


局 ( 9 ) 编辑 完成 ， 单 击 【 保存 】 按 钮 ， 完 成 数据 库 的 创建 ， 最 后 关闭 Access 软件 。 
4.2.2 创建 数据 库 连 接 
在 数据 库 编 辑 完成 后 ， 必 须 在 Dreamweaver C56 中 建立 能 够 使 用 的 数据 源 连 接 对 象 ， 这 
样 才 能 在 动态 网 页 中 使 用 这 个 数据 库 文 件 。 连 接 数 据 库 的 方法 有 很 多 ， 接 下 来 将 介绍 在 
Dreamweaver CS6 中 用 0DBC 连接 数据 库 的 方法 。 操 作 的 过 程 中 要 特别 注意 0DBC 连接 时 参数 
的 设置 。 
具体 的 连接 步骤 如 疏 O 
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(1) 在 【控制 面板 】 中 ， 双 击 运行 【数据 源 (0DBC) ] 的 ' 


4-16 所 示 的 【 0DBC 数据 源 管理 器 】 对 话 框 。 





类 捷 方 式 吕 中 ” ， 将 打开 如 图 


(2 ) 单 击 【 0DBC 数据 源 管理 器 】 对 话 杠 上 的 【 系统 DSN ] 选项 卡 ， 如 图 4-17 所 示 。 


ODBC 数据 涯 管理 条 
用 户 DSN | 系统 DSH | 文件 DSH | 驱动 程序 | 跟踪 ”| 连接 池 | 关于 | 


用 户 数 据 源 员 ): 
添加 血 )... | 
_ 过 | 
配置 CC)... | 








ODBC 数据 源 管 理 圳 
用 户 DsH 系统 DSH | 交 件 DSH | 驱动 程序 | 跟踪 ”| 连接 池 | 关于 | 


系统 数据 源 (8): 
添加 血 )... | 





0DBC 系统 数据 源 存 姥 了 如 何 与 指定 数据 提供 程序 连接 的 信息 。 系 
统 数据 源 对 当前 机 器 上 的 所 有 用 尸 可 见 ， 包 质 开 服务 。 





图 4-16 【0DBC 数据 源 管 理 器 】 对 话 框 国 图 4-17 【0DBC 数据 源 管 理 器 】 中 的 【 系统 DSN】 


(3) 在 【系统 DSN]】 对 话 框 中 单 击 【 添 加 (D)] 按钮 ， 打 开 【 创建 新 数据 源 】 对 话 框 ， 


如 图 4-18 所 示 。 


( 4) 在 【创建 新 数据 产 】 对 话 框 中 ， 选 择 【 Driver do Microsoft Access ( *.mdb ) 】 选 


项 ， 然 后 单 击 【 完 成 】 按 钮 。 


(5 ) 打开 【0DBC Microsoft Access 安装 】 对 话 框 ， 在 【 数据 源 名 ( N ) 】 文 本 框 中 输入 


dsnuser， 如 图 4-19 所 示 。 








DODEC Hicrosoft Access 安装 





选择 (8)... | 创建 C)... | 收复 @&)... | 压缩 如 ... | 


-系统 数据 库 


从 无 还) 
个 数据 库 工 ): 














| 选项 0)>> | 





而 图 4-18 【 创建 新 数据 源 】 对 话 杠 国 图 4-19 【0DBC Microsoft Access 安装 】 对 话 框 


( 6 ) 单 击 【选择 ( 3 )】 按 钮 ， 打 开 【 选择 数据 
库 】 对 话 框 ， 如 图 4-20 所 示 。 单 击 【 驱动 器 (V): 】 
文本 框 右边 的 三 角 按钮 |， 从 下 拉 菜 单 中 找到 在 创 
建 数 据 库 步骤 中 数据 库 所 在 的 盘 符 ， 在 【目录 
(D) :】 中 找到 在 创建 数据 库 步 又 中 保存 数据 库 的 
文件 夹 ， 然 后 单 击 左上 方 【 数据库 名 ( A )】 选 项 组 
中 的 数据 库 文件 user.mdb， 则 数据 库 名 称 自动 添 
加 到 【 数据库 名 ( A )】 下 的 文本 框 中 。 


ODBC 看 icrosoft Access 安装 


目录 种 ) : 
EVArodsitewuser 


3E 动 器 (Y): 


| 辐 #: WORK | 





各 图 4-20 【选择 数据 库 】 对 话 框 








Cs 
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Us6 
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(7 ) 找到 数据 库 后 ， 在 【选择 数据 库 】 对 话 框 中 单 击 【 确定 】 按 钮 ， 回 到 【 0DBC 


_Microsoft Access 2 对 话 框 中 ， 再次 单 击 【 确定 】 按钮 ， 将 返回 到 【 0DBC 数据 源 管理 器 】 
中 的 【系统 DSN 】 对 话 框 中 ， 则 可 以 看 到 [ 系统 数据 站 】 中 已 经 添加 了 一 个 名 称 为 “dsnuser”、 


| 为 “Driver do Microsoft Access ( *.mdb )” 的 系统 数据 源 ， 如 图 4-21 所 示 。 
) 再 次 单 击 【 确定 】 按钮 ， 完 成 【 0DBC 数据 源 管理 器 】 中 【 系统 DSN 】 的 设置 。 
) 启动 Dreamweaver CS6， 执 行 菜 单 栏 中 的 【文件 】 一 【 新建] 命令， 打开 【新 建 


2 | 二 | 对 话 框 ， 在 网 站 根 目 录 下 新 建 一 名 为 defauT.asp 的 网 页 并 保存 ， 如 图 4-22 所 示 。 


保存 在 :| 忆 








10DBC 束 概 源 管 理 惟 


Ez 
我 最 近 的 站 档 


桌面 








7 








文件 名 四 : |default v 保存 G) | 




















保存 类 型 多) 。 | 所 有 文档 fr. htn:y. htnlik_shtmik shtml YX| [取消 ] 
加 图 4-21 0DBC 数据 源 管 理 器 国 图 4-22 建立 首页 并 保存 
( 10 ) 设置 好 【站 点 人 【文档 类 型 ]【 测试 服务 器 ]， 在 Dreamweaver CS6 软件 中 执行 菜 


er 命令 ， 打开 【 数据库】 面板 ， 如 图 4-23 所 示 。 
I 
es ( DSN ) 命令 。 





若 要 在 该 页 面 上 使 用 动 者 数据 : 
ww 1 请 为 证 文件 自 建 一 个 站 点 。 





加 图 4~23 ”应 用 程序 【数据库 】 面 板 | 图 4-24 ”执行 数据 源 名 称 ( DSN ) 命 


( 12 ) 打开 【数据 产 名 称 ( DSN )】 对 话 框 ， 在 【 连接 名 称 : 】 文 本 框 中 输入 connuser， 单 
击 【 数据 产 名 称 ( DSN ): 】 文 本 框 右边 的 三 角 按钮 六， 从 打开 的 下 拉 菜 单 中 选择 在 【 数据 产 
(0DBC) 】 一 【 系统 DSN 】 中 所 添加 的 dsnuser， 其 他 保持 默认 值 ， 如 图 4-25 所 示 。 


数据 源 名 称 (DSH) 


wer 应 连接 : 癌 ) 使 用 硒 试 最 基 品 上 的 nsH 
加 使 用 本 地 IEH 





图 4-25 【数据 产 名 称 ( DSN ) 】 对 话 框 


3 ) 在 【数据 源 名 称 ( DSN )】 页 面 中 ， 单 击 【 测 :rs 
试 ] 按钮 ， 如 打开 图 4-26 所 示 页 面 ， 则 说 明 数 据 库 
连接 成 功 ， 否 则 应 逐一 检验 之 前 各 项 步骤 是 否 正 确 完 
成 。 修 改 至 测试 成 功 后 ， 单 击 【 确定 】 按 钮 后 完成 此 | 确定 


JU 成 功名 隆 连 接 脚 示 。 





) 在 【 应 用 程序 ] 面板 中 ， 此 时 内 容 应 如 图 和 
4 一 27 所 示 。 


(15 ) 同时 在 网 站 根 目录 下 将 会 自动 创建 一 个 名 为 Connections 的 文件 来 ， Connections 
I 


rr CDIIIIUSEIT 一 记事 本 

让 件 代 ) 编辑 于 ) 档 式 人 @) 查看 外) 帮助 (1) 

K% 

" FileName="Connection _ odbc conn_dsn.htm"" 
. Type="ADO" 

" DesigntimeType=""ADO" 

" HTTP="false" 

" Catalog="""" 





Dim MM connuser_ STRING 
HM connuser_STRING = "dsn=dsnuser;" 


%> 





4-27 ”设置 的 数据 库 4-28 自动 产生 的 conn.asp 


洒 之 兼职 指导 
文件 具体 内 容 如 下 (“conn.asp” 文 件 可 以 用 记事 本 打开 ). 
米 米 炒米 炒米 炒米 炒米 炒米 炒米 炒米 米 米 米 米 炒米 炒米 炒米 炒米 米 米 炒米 炒米 炒米 炒米 米 米 炒米 炒米 炒米 米 米 炒米 炒米 炒米 炒米 炒米 炒米 炒米 炒米 炒米 炒米 米 米 米 米 炒米 
<% 
' FileName="Connection odbc conn dsn.htm" 
'Type="ADO" // 设 置 为 ADO 模式 数据 库 连 接 
' DesigntimeType="ADO" 
' HTTP="false" 
' Catalog="" 
' Schema="" 
Dim MM connuser STRING 
MM connuser STRING = "dsn=dsnuser;"// 定 义 并 绑 定 dsn 数据 库 


200> 
米 米 米 米 米 米 炒米 炒米 炒米 米 米 米 米 米 米 炒米 炒米 炒米 米 米 米 米 米 米 炒米 炒米 炒米 米 米 米 米 米 米 炒米 炒米 炒米 米 米 米 米 米 米 米 米 炒米 炒米 米 米 米 米 米 米 米 米 炒米 炒米 米 米 


里 面 设 置 了 数据 库 的 连接 方法 及 参数 设置 还 有 路 径 。 要 指出 的 是 ， 如 果 网 站 要 上 传 到 远 
程 的 服务 器 端 ， 需 要 对 数据 库 的 路 径 进行 更 改 后 才 可 以 正确 使 用 。 


( 16 ) 执行 菜单 栏 中 的 【文件 】 一 【 保存】 命令， 保存 该 文 要 ， 完 成 数据 库 的 连接 。 
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4.3 登录 功能 设计 


接 下 来 对 整个 会 员 管理 系统 所 需要 的 页 面 结构 做 一 个 整体 的 规划 。 在 该 员 面 中 ， 
除了 可 以 让 用 户 输入 用 户 名 和 密码 进行 登录 外 ， 还 应 该 包 打 新 用 户 注册 和 找 回 遗失 密 
码 的 功能 。 当 在 用 户 名 文本 框 和 密码 文本 框 中 分 别 输入 用 户 名 和 密码 ， 并 单 击 【有 登 
东 】 按 钮 后 ， 将 进入 一 个 登录 页 面 ， 该 页 面 应 该 具有 验证 用 户 名 和 密码 是 否 正 确 的 功 
能 。 如 果 用 户 名 和 密码 都 正确 ， 将 直接 进入 会 员 管理 系统 主页 ， 如 果 不 正 确 ， 则 将 显 
示 不 正确 信息 ， 并 提示 重新 登录 信息 。 如 有 果 是 新 用 户 ， 则 可 以 直接 单 击 “ 新 用 户 注 
有 册 ” 链 接 文 本 ， 进 入 新 用 户 注 册页 面 。 如 果 芯 记 密码 ， 则 可 以 单 击 “ 取 回 密码 ”链接 
文本 ， 进 入 找 回 遗失 密码 的 页 面 。 另 外 还 需要 为 用 户 提 供 修 改 个 人 资料 和 注销 身份 的 
功能 。 虽 然 这 两 个 功能 疫 有 在 该 页 面 上 显示 出 来 ,但 是 都 和 注册 信息 有 直接 关系 ， 
此 ， 也 属于 会 员 管理 系统 。 

通过 上 和 面 的 分 析 与 人 设计， 会员 管 理 系统 主要 由 以 下 的 一 些 动 态 网 员 构 成 ， 如 表 4-2 
所 示 。 


表 4-2 用 尸 数据 设计 表 








需要 制作 的 页 面 页 面 名 称 
用 户 登 录 页 面 default.asp 
登录 成 功 页 面 welcome.asp 
登录 失败 页 面 loginfail.asp 

新 用 户 注 册页 面 register.asp 
注册 成 功 显 示 页 面 registerok.asp 
注册 失败 显示 页 面 registerfail.asp 

用 户 找 回 遗 失 密 码 的 页 面 lostpassword.asp 
显示 提示 问题 的 页 面 showquestion.asp 
正确 回答 问题 后 显示 密码 的 页 面 showpassword.asp 
修改 个 人 资料 的 页 面 userupdate.asp 
用 户 删 除 账号 的 页 面 userdelete.asp 


4.3.1 制作 登录 页 面 


在 用 户 访问 该 登录 系统 时 ， 首 先 要 进行 身份 验证 ， 这 个 功能 是 靠 登录 页 面 来 实现 的 。 如 
果 输 入 的 用 户 名 和 密码 与 数据 库 中 已 有 的 用 户 名 和 密码 相 匹 配 ， 则 登录 成 功 ， 进 入 到 
welcome.asp 页 面 ， 如果 输 入 的 用 户 名 和 密码 与 数据 库 中 已 有 的 用 户 名 和 密码 不 行 ， 则 登录 
失败， 进入 显示 登录 失败 的 页 面 loginfail.asp。 

制作 的 步骤 如 下 。 

( 1 ) 首先 来 看 登录 系统 中 都 包含 哪些 内 容 。 当 进入 站 点 后 ， 看 到 的 是 登录 系统 的 页 面 ， 
4-29 所 示 为 登录 系统 的 首页 。 


ES 注册 一 看 1CIOSO ft Internet Explorer 
: 文件 字 ) ”编辑 外) 查看 名 收藏 入 工具 民 ) 帮助 册 ) 


国良 -上 园 - 四 国人 的 万 歧 责 4 人 内 加 由 -各 


; 地 址 0) 加 http:yA127.0.0. 1/user/ de fault. a asp 























图 4-29 ”登录 系统 主页 面 


(2 ) default.asp 页 面 是 这 个 登录 系统 的 首页 ， 
ee 1 而 。 打 开 刚 创建 的 
default.asp 页 面 ， 输 入 网 页 标题 “注册 ， 执 行 荣 单 
栏 ps 一 【保存 】 命 令 。 

( 3 ) 执行 菜单 栏 上 的 【插入 】 一 【表格 】 命 
， 打开 【表格 】 对 话 框 ， 在 【 行 数 】 文 本 框 中 输 

需要 插入 表格 的 行 数 2， 在 【 列 数 】 文 本 框 中 输入 
ws 1]， 在 【表格 宽度 】 文 本 框 中 输 
入 400 像素 ， 其 他 的 保持 默认 值 ， 如 图 4-30 所 示 。 

) 单 击 【 确定 】 按 钮 ， 在 该 表单 中 插入 2 行 1 
列 的 表格 。 将 鼠标 放置 在 第 一 行 表 格 中 ， 单 击 【 常 
用 】 工 具 栏 上 的 【图 像 】 国 图 标 ， 打 开 【 选择 图 像 
源 文件 】 对 话 框 ， 在 站 点 中 选择 images 文件 下 的 
regbanner.g 计 图 片 ， 如 图 4-31 所 示 。 


选择 图 敬 源 文件 
选择 文件 名 自 : 加 文件 系统 站 点 根 目 录 
〇 数据 源 


站 点 和 服务 线 


行 数 : |2 
表格 宽度 : 
边框 粗细 : 中 

单元 格 边 距 : 
单元 格 间距 : | 


























辅助 功能 





标题 : 








摘要 : | 








| 图 4-30 插入 表格 








查找 范围 工 ) : | B images v| [€) 店 苏 图 > 





(| FEMALE. GIF 
MALE. GIF 


四 | -egbanner. eif 





辫 件 名 中) : egbanner. eif 
文件 类 型 (T): | 图像 文 件 (rk. gif;*. jpe:*. jpee:*. pne:* 议 











400 x 113 GIF, 20 K/3 











TURL: "images/reebanner. gif 
相对 于 : “| 站 点 根 目录 Y | [站 点 定义 中 没有 提供 ITTF 地 址 。] 
在 站 点 定义 中 更 改 默 让 的 链接 相对 于 


预览 图 像 








4-31 设置 【选择 图 像 源 文件 】 对 话 框 
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一 (5) 单 击 【确定 】 按钮 ， 在 表格 中 插入 装饰 用 的 图 片 ， 如 图 4-32 所 示 。 


FD: vsitewuaserdefault ,asp LXHTYL) 一 口 站 





blew tr» td [dimed 


国 图 4-32 插入 图 片 的 效果 
EO 
) 按 《Shift+Enter 》 组合 键 进行 换行 操作 ， 输 入 “用 户 登 录 页 面 ” 并 单 击 【 属性 检 


查 器 】 面 板 上 的 【 右 对 齐 】 按 钮 主 |， 然 后 在 【 文本 颜色 】 文 本 框 中 输入 文字 的 颜色 值 为 
#00B7FF。 完 成 后 的 效果 如 图 4-33 所 示 。 


四 D:\site\user\default. asp* = el. 





国 图 4-33 ”输入 说 明文 字 效果 


EE 


) 拖 动 鼠标 选择 整个 插入 的 表格 ， 在 【 属性 检查 器 】 中 设置 【 边框 】 值 为 1， 如 图 4-34 


尾 性 


i 
表格 

3 行 加 P | 宽 W[eoo ] 俐 来 “加 | 着 充 四 |] 放风 共同 EL 

wa 是 有 @5 这 本 m 


局 tpl tm 0 
ss 


大 图 4-34 设置 表格 边框 属性 


8 ) 用 鼠标 单 击 表 格 的 第 2 行 ， 执 行 菜单 栏 中 的 【插入 】 一 【表单 ] 一 【表单 】 命 令 ， 
如 图 4-35 所 示 ， 插 入 一 个 表单 。 





106 

















Tn 
trilt+E | 
ET is 
el | 一 一 - 图 长 站) CtrithlutT - 
| 白雪 [ 二 计 | | 闫 时 训 加 | 加 太守 条 ') + 上 | 标 昭 : 尘 国 
| 二 址 ,所 1 Lied 关上 音 册 2 
书本 渴 高 t 到 机/ 藤 单 》 氏 1) 
k 主 邦 奶 业 1 
粳 硬 惠 介 品 ) mai 
是 道 榴 必 三 片 厢 让) 
, 香 志 接 硼 硬 后 | 
EN ,| 各地 和 由 
出 a ;| 趾 竺 湿 晶 呆 ) 
中 hel em 
瑟 加 对 于 吕 ) :| 于 及 机 二 1 he 
MF 利 寻 由 + 和 怪 稚 还 I ed 血 上 使 镍 屠夫 莫 扬 : 归 
博 胡 明雄 件 他 齐 一 个 耻 吉 。 
[上 部 5 了 振江 壮志 晟 加 1 二 了 进 择 一 师 并 本 呈 下 。 
束 谋 更 大 对 侣 怕 1. . rT 振江 误 吉 区 辐 问 ) Cb 蕊 
7 盾 这 复 进 三 区 1 | » 
hry 政 证 渤 乔 区 
ry 幅 证 窜 眶 
中 证 三 认 . 后 j 
些 讶 重 填 探 阻 古 
Tp li he ebay rd 人 || 记 
恒 社 
[| 虱 起 加 | 无 | 品 | 更 + 了 有 喇 翅 霹 直 和 是 如 | | 
本 | 示 | bn Ts 四 标 同 
[加 章 元 后 吉平 亦 肝 让 二 | 砍 名 |。 | 到 盐 行 加 口 情景 脸色 是 | 
一 曾 开 重 丰 鸭 Wtk 。 芝 | 融 好 | | 蛋 归 如 口 
野 款 于 | 入 局 量 市 1 "ET 和 

















大 图 4-35 执行 插入 表单 命令 


) 将 鼠标 指针 放置 在 该 表单 中 ， 执 行 菜单 栏 上 的 【插入 】 一 【表格 ] 命令， 打开 【 表 
格 】 ww 在 【 行 数 】 文 本 框 中 输入 需要 插入 表格 的 
行 数 2， 在 【 列 数 文本 框 中 输入 需要 插入 表格 的 列 数 TT 
3， 在 【表格 宽度 】 文本 框 中 输入 400 像素 ， 其 他 的 设置 te [EE 
保持 默认 值 ， 如 图 4-36 所 示 。 i 
0 ) 单 击 【 确定 】 按钮 ， 在 该 表单 中 插入 2 行 3 列 > 
的 表格 ， 在 表格 的 第 一 列 中 分 列 输入 文字 说 明 “ 用 户 
名 :” 和 “密码 :”"， 在 第 二 列表 格 中 单 击 【 文 本 域 】 按 钮 | 并 
口 ， 分 别 插入 两 个 单行 文本 域 表单 对 象 ， 定 义 两 个 文本 mm 
域名 分 别 为 username 和 password。 为 了 让 没有 注册 的 浏 
响 者 方便 注册 ， 需 要 在 表格 的 第 一 行 的 第 三 列 中 输入 
“新 用 户 注 册 ” 文 本 ， 并 设置 该 文本 为 一 个 切换 到 用 户 注 


























册页 面 register.asp 的 链接 对 象 ， 以 方便 新 用 户 注 册 。 输 于 名 4-36 插入 表格 
入 的 效果 如 图 4-37 所 示 。 
ED: \site\user\default. asp* -| 





<try<th Idiv...> (Rm 532 x 254v 22 kK / 4 秒 简体 中 文 582312) 


国 图 4-37 建立 说 明 链 接 


107 


(30 


有 
| 





108 


























( 11 ) 如 果 已 经 注册 的 用 户 态 记 了 密码 ， 布 望 以 其 他 方式 能 够 重新 获得 密码 ， 可 以 在 表 


格 的 第 二 行 的 第 三 列 中 输入 “ 取 回 密码 ”文本 ， 并 设置 该 文本 为 一 个 切换 到 取 回 密码 页 面 
| lostpassword.asp 的 链接 对 象 ， 以 方便 用 户 取 回 密码 ， 如 图 4-38 所 示 。 


Di:\sitevuservdefault.aspk = Ex 


10095 (399) = 


170 (7 用 =- 一 一 -一 140 14 有 = 一 一 





a i nt [RI 100% v532 x 254v 22 KK /4 秒 简体 中 六 (GB2312) my 





力图 4-38 取 回 密码 设置 


( 12 ) 在 表单 中 插入 用 于 提交 用 户 名 和 密码 的 表单 对 象 ， 和 一 个 用 于 重新 填写 登录 信息 
的 表单 对 象 。 按 《Enter 》 键 换行 ， 分 别 执行 两 次 菜单 栏 中 的 【插入 】 一 【表单 】 一 【 按 
钮 】 命令 ， 插 入 两 个 按钮 ， 并 分 别 在 【 属性 检查 器 】 面 板 中 进行 属性 变更 ， 一 个 为 登录 时 用 
的 “提交 表单 ”选项 ， 一 个 为 “ 重 设 表单 ”选项 ,【 属性 检查 絮 】 的 设置 如 图 4-39 所 示 。 








属性 
按钮 名 称 值 0 动作 @) 提交 表单 6) 〇 无 类 (C) 
O 〇 重 设 表单 _@) 

属性 

i 值 0 动作 〇 提交 吉 单 6) 〇 无 类 (C) 
人 @) 重 设 表单 (R) 


国 图 4-39 设置 【属性 检查 器 】 


(13 ) 表单 编辑 完成 后 ， 下 向 来 编辑 该 网 页 的 
动态 内 容 ， 使 用 户 可 以 通过 该 网 页 中 表单 的 提交 
实现 登录 功能 。 执 行 菜单 栏 中 的 【窗口 ] 一 【上 服 
务 器 行为 】 命令， 打开 【服务 如 行为】 面板。 单 
击 该 面板 了 上 “+” 按钮 ， 从 打开 的 菜单 中 选择 【用 




















=。 显示 区 域 ; 
| 动态 文本 


| “记录 集 ( 查询 ) 
命令 
”重复 区 域 
记录 集 分 页 








| 转 到 详细 页 面 
户 身 份 验证 】 一 【 登录 用 户 】 人 命令， 如 图 4-40 所 本 图 四 
示 ， 问 该 网 页 添加 登录 用 户 的 服务 絮 行 为 。 更 有 = 


动态 表单 元 素 
用 户 身 份 验 证 










登录 用 户 
限制 对 页 的 访问 








XSLT 转换 1 
( 14 ) 此 时 ， 打 开 如 图 4-41 所 示 的 【 登录 用 ie 5 5 
户 】 对 话 框 ， 由 于 该 对 话 框 中 需要 设置 的 参数 较 |( 到 更 多 服务器 行为 EE 
多 ， 下 向 一 步 一 步 进行 介绍 。 看 图 4-40 ”添加 【登录 用 户 】 的 服务 器 行为 


从 表单 获 职 输入 : | form 








用 户 名 字段 : serIame 








密码 字段 aSsSwor 











使 用 连接 验证 : 无 








表格 : 








用 户 名 列 |: 








密码 列 : 














如 果 登 录 成 功 ， 转 到 : | 





口 转 到 前 一 个 URL( 如 果 它 存在 ) 





如 果 登 录 失败 ， 转 到 : | 





] [ 浏 览 ... 


] (区 





基于 以 下 项 限制 访问 : @) 用 户 名 和 密码 


C 〇 用户 名 、 窗 码 和 访问 级 别 


获取 级 别 自 : 





4-41 【登录 用 户 】 对 话 框 


( 15 )【 登录 用 户 】 对 话 框 的 第 一 部 分 用 来 设置 表单 中 的 文本 域 的 功能 ， 进 行 如 下 设置 。 


@ 从 【从 表单 获取 输入 】 下 拉 菜 单 
中 选择 该 服务 絮 行 为 使 用 网 页 中 
的 forml 表单 对 象 中 浏览 者 填写 
的 对 象 。 

@ 从 【用 户 名 字段 】 下 拉 列 表 中 选择 
文本 域 username 对 象 ， 设 定 该 用 户 
登录 服务 器 行为 的 用 户 名 数据 来 产 


为 表单 的 username 文本 域 中 浏览 
输入 的 内 容 。 

@ 从 【密码 字段 】 下 拉 列 表 中 选择 文 
本 域 Password 对 象 ， 设 定 该 用 户 登 
录 服 务 器 行为 的 用 户 名 数据 来 源 为 
表单 的 Password 文本 域 中 浏览 者 输 
入 的 内 容 。 


(16 )【 登录 用 户 】 对 话 框 的 第 二 部 分 是 用 来 设置 服务 喜 行 为 使 用 到 数据 产 连 接 的 一 


些 参 数 。 

@ 从 【使 用 连接 验证 】 下 拉 菜 单 中 选 
择 用 户 登 录 服 务 器 行为 使 用 的 数据 
产 连 迭 对 象 为 connuser。 

@ 从 【 表格】 下拉 菜单 中 选择 该 用 户 
登录 服务 器 行为 使 用 到 的 数据 库 表 
对 象 为 user。 

完成 后 的 设置 如 图 4-42 所 示 。 


司 用 连接 将 证 : 渤 


@ 从 【用 户 名 列 】 下 拉 荣 单 中 选择 表 
user 存储 用 户 名 的 字段 为 Username 
字段 。 

@ 从 【密码 列 】 下 拉 菜 单 中 选择 表 
user 存储 用 户 密码 的 字段 为 
password 字段 。 





去 格 
用 户 名 到 
宫 碍 列 


图 4-42 设置 数据 源 连 接 


( 17 )【 登录 用 户 】 对 话 框 的 第 三 部 分 用 来 设置 用 户 登 录 成 功 或 失败 时 分 别 转 向 的 页 面 。 
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@ 在 【如 果 登 录 成 功 ， 转 到 】 文 本 框 中 @ 在 【如 果 登 录 失 败 ， 转 到 】 文 本 框 中 


输入 登录 成 功 后 ， 转 向 welcome.asp 输入 登录 失败 后 ， 转 向 loginfail.asp 
页 面 。 页 面 。 

这 两 个 网 页 将 在 后 面 再 单独 进行 编辑 。 

六 兼职 指导 : 


如 果 选 中 【如 果 登 录 成 功 ， 转 到 】〗 栏 的 I URL( 如 果 它 存在 )】 复 选 按钮 ， 则 
登录 成 功 后 浏览 器 会 回 到 浏览 default.asp 的 前 一 


( 18 ) 登录 用 户 】 对 话 框 的 最 后 一 部 分 是 用 来 设置 后 面 设 定 用 户 浏览 权限 所 要 用 到 的 一 


些 参 类 
@ 选择 【基于 以 下 项 限制 访问 】 后 面 @ 然后 从 【 获取 级 别 自 】 下 拉 菜 单 中 
的 【用户 名 、 密 码 和 访问 级 别 】 单 选择 Authority 字段 ， 表 示 根 据 
选 按钮 ， 设 定 后 面 将 根据 用 户 的 用 Authority 字段 的 数字 来 确定 用 户 的 
户 名 、 密 码 及 权限 级 别 共同 决定 其 权限 级 别 。 


浏 时 网 页 的 权限 。 
完成 后 的 设置 如 图 4-43 所 示 。 


如 果 党 录 成 功 ， 转 到 | 
[| 转 到 前 一 个 WRLC 如 果 它 存在 ) 
如 果 党 录 失 败 ， 转 到 


基于 以 下 项 限制 访问 : 上 用 户 名 和 密码 
用 户 各， 密码 和 访问 语 别 
线 职 语 列 | 自 uthoritw 





国 图 4-43 ”设置 访问 权限 
遂 过 以 上 四 个 步骤 完成 设置 工作 。 最 后 得 到 的 对 请 框 如 图 4-44 所 示 。 








从 表单 获取 输入 : | form 
用 疡 襄 李 入 避 usernane 
密码 字段 3 asSwor 














使 用 连接 验证 : | conmuser 
表格 : | user 

用 户 名 列 : | username 

密码 列 : | password 




















如 果 登 录 成 功 ， 转 到 : [welcome. asp | 





回转 到 前 一 个 URL( 如 果 它 存在 ) 
如 果 登 录 失败 ， 转 到 |: loginfail. aspl | 














基于 以 下 项 限制 访问 : 〇 用户 名 和 密码 
@ 用 户 名 、 密 码 和 访问 级 别 
获 职 级 别 自 : | Muthority 














4-44 ”设置 完成 后 的 【 登录 用 户 】 对 话 框 
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(19 ) 设置 完成 后 ， 单 击 【 确定 ] 按钮 ， 关 闭 该 对 _ 
话 框 ， 返 回 到 【文档 ] 窗口 。 在 【 服务 器 行为 ] 面板 中 。 鸯 现 币 册 本 汪 生 四 


二 一 姑 档 兰 型 : BSF ESeript 


增加 了 一 个 【登录 用 户 】 行 为 ， 如 图 4-45 所 示 。 

( 20 ) 同时 ， 可 以 看 到 表单 对 象 对 应 的 【 属性 检查 
器 面板 的 动作 属性 值 为 《%=MM_LoginAction%>， 如 图 
4-46 所 示 。 它 的 作用 就 是 实现 用 户 登 录 功 能 ， 这 是 一 









































个 Dreamweaver CS6 目 动 生成 的 动作 对 象 。 4-45 【服务 器 行为 】 面板 
属性 
名 表单 ID 动作 <%=MN_Loginhction%> | 加 目标 CT) | EE 三 
se | 方法 F0sT v| 编码 类 型 v 














国 图 4-46 ”表单 对 应 的 【属性 检查 器 】 面 板 
( 21 ) 执行 菜单 栏 中 的 【文件 】 一 【 保存】 命令， 将 该 文档 保存 到 本 地 站 点 中 。 
4.3.2 ”登录 失败 和 成 功 页 面 


当 用 户 输 入 的 登录 信息 不 正确 时 ， 就 会 切换 到 loginfail.asp 页 面 ， 显 示 登 录 失 败 的 信 


息 。 如 果 浏 览 者 输入 的 登录 信息 正确 ， 就 会 切换 到 welcome.asp 页 面 ， 如 图 4-47 所 示 。 


文件 @) ” 编 回 人 E)】 查看) 收 过) 工具) 车 助 (QW) 

\ [本 
@ 肆 - 园 - 因 国 提 万 球 广 FF 夺 R 轩 评 
起 这 人 @ TY 1171E7T.0.0.17ssermelcene asp 


欢迎 界面 
苛 录 成 功 ， 次 i 中 收 : 小 于 
斌 以 宪 的 注册 商科 
项 用 户 
时 来 合 话 





























4-47 ”登录 成 功 界面 


本 六 将 完善 登录 功能 页 面 并 进行 测试 ， 制 作 步 又 如 下 。 

(1 ) 执行 荣 单 栏 【 文 件 】 一 【新建 】 命 令 ， 【 新 建文 档 】 对 话 框 ， 新 建 一 个 动态 的 
ASP VBScript 文档 ， 命 名 为 loginfail.asp， 并 在 网 页 标题 栏 中 输入 “登录 失败"。 执 行 菜单 栏 
上 的 【文件 】 一 【保存 】 命 令 ， 在 站 点 中 保存 这 个 页 面 。 

) 在 文档 中 用 Dreamweaver C56 的 工具 输入 如 图 4-48 所 示 的 文字 内 容 。 在 【文档 】 
窗口 中 选中 “这 里 ”文本 ， 在 其 对 应 的 【属性 检查 器 】 面 板 中 上 的 【链接 】 文本 框 中 输入 
default.asp， 将 其 设置 为 指向 default.asp 页 面 链 接 ， 显 示 用 户 登 录 失 败 信 息 的 1oginfail.asp 
页 面 。 
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= 


Ton) D:\site\user\loginfail.asp 


登录 失败 


:请 您 检查 用 户 名 和 密码 是 否 正 确 





[RI 池 忆 100% v594x216v 1K/1 秒 简体 中 交 (6B2312)|  :: 





时 图 4-48 网 页 loginfail.asp 


(3 ) 执行 菜单 栏 中 的 【文件 ] 一 【 保存】 命令， 将 该 文档 保存 ， 完 成 loginfail.asp 页 面 
的 创建 。 

(4 ) 执行 菜单 栏 中 的 【文件 】 一 【新 建 ] 命令 ， 打开 【 新 建文 档 】 对 话 框 ， 新 建 一 个 动 
态 的 ASP VBScript 文档 ， 输 入 网 页 标题 “欢迎 界面 "， 执 行 菜 单 栏 中 的 【文件 】 一 【保存 】 
命令 ， 将 该 文档 保存 为 welcome.aspo 

(5 ) 使 用 Dreamweaver CS6 中 提供 的 制作 静态 网 页 的 工具 完成 如 图 4~49 所 示 的 静态 
分 。 在 这 里 为 了 测试 方便 ， 登 录 系 统 只 编辑 了 一 些 简单 的 内 容 。 


TD:\sitehuser\welcome. asp* -日 X 


欢迎 界面 
登录 成 功 ， 欢迎 您 : YOO0X 
修改 您 的 注册 资料 
删除 用 户 | 
结束 会 话 











v 


Cbody> Ctable> Ctr> <td> <p...>》 [WE] 的 QI00% ”v590 x 354v 23 /4 秒 简体 中 文 (GB2312) 








大 图 4-49 欢迎 界面 


Im ( 6 ) 执行 菜单 栏 中 的 【 窗口 ] 一 【 绑 定 】 命 令 ， 打 开 
记录 集 (查询 ) | 【 绑 定 】 面 板 ， 单 击 该 面板 上 “+” 按 钮 ， 从 打开 的 菜单 中 





选择 【 阶段 变量 命令， 为 网 页 中 定义 一 个 阶段 变量 ， 如 
4 一 D0 所 示 。 





命令 ( 预存 过 程 ) 
请 求 变量 





ee 
~ 
| 

















| Spry 数据 集 上 阶段 变量 
获取 数据 源 .. . | 本 司 

[一 一 加 

ea Hd Ee mrt Past (7) 此 | 守 : JDL_username 
国 图 4-50 添加 阶段 变量 开 【 阶段 变量 】 对 





话 框 。 在 【 名 称 】 文 本 框 中 输入 【 阶段 变量 】 的 名 称 
MM_username， 如 图 4-51 所 示 。 国 图 4-51 定义 阶段 变量 


( 8 ) 设置 完成 后 ， 单 击 该 对 话 框 中 的 【 确定】 按钮 ， 着 二 轩 宣 吧 咱 时 时 于 于 于 


十 一 净 档 类 型 : ASP VBScript G 


闭 该 对 话 框 ， 返 回 到 【文档 】 窗口 。 在 【 绑 定 】 面 板 中 ， 就 
会 显示 一 个 动态 数据 对 象 组 Session。 单 击 Session 图 标 左边 
的 “+” 按 钮 ， 可 以 到 看 所 有 的 阶段 变量 ， 可 以 看 到 刚才 定义 
的 MM_username 显示 在 其 中 ， 如 图 4-52 所 示 。 

(9 ) 在 【文档 】 窗 口中 通过 拖 动 鼠标 选择 “XXXXXX” 文 
本 ， 然 后 在 【 绑 定 】 面 板 中 选择 MM_username 变量 ， 再 单 击 图 4-52 【 绑 定 ] 面板 
【 绑 定 】 面 板 底 部 的 【 插入】 按钮， 将 其 插入 到 该 【文档 】 窗 口中 设 定 的 位 置 。 插 入 完毕 ， 
可 以 看 到 “XXXXXX” 文 本 被 fSession.MM_usernamej 占 位 符 代 替 ， 如 图 4-53 所 示 。 这 样 就 完成 
了 显示 登录 用 户 用 户 名 阶段 变量 的 添加 工作 。 当 网 页 在 浏览 器 中 显示 时 ， 该 阶段 变量 将 被 具 
体 的 用 户 名 代替 。 





mt | 





TE nD: hsitehuser\wel come. asp | 








欢迎 界面 


登录 成 功 ， 欢迎 您 : {Session. 了 _username} 





v 
ble> Ctr> <td> 人 ><span .. > <a> [和 | 到 区 110o0% v590 x 354v 23 玉 /4 秒 简体 中 站 (6B2312) 


是 图 4-53 绑 定 后 的 效果 











7 之 兼 职 指导 : 

以 上 定义 的 阶段 变量 对 当前 站 点 内 所 有 的 网 页 文件 都 是 有 效 的 。 当 用 户 登 录 成 功 时 ， 服 
务 器 就 为 用 户 建立 一 个 会 话 变量 ， 在 一 般 情 况 下 ， 为 用 户 提供 的 大 部 分 功能 都 是 基于 这 个 会 
话 对 象 的 ， 如 果 用 户 浏 览 完 毕 ， 需 要 退出 时 ， 就 必须 结束 这 个 会 话 变量 ， 否 则 有 可 能 造成 用 
户 信 息 泄 露 。 在 一 般 情 况 下 ， 如 果 用 户 关 闭 浏 览 器 或 用 
户 长 时 间 没 有 操作 以 致 服务 器 认为 用 户 已 经 离开 ， 都 可 
以 结束 该 用 户 的 会 话 对 各。 但是， 不 能 通过 这 两 种 消极 
的 方式 来 结束 会 话 ， 应 该 在 网 页 中 为 用 户 提 供 一 个 积极 
的 结束 会 话 。 在 Dreamweaver CS6 中 要 实现 这 种 功能 很 
简单 ， 只 要 通过 【注销 用 户 〗 的 服务 器 行为 就 可 以 了 。 







十 一 净 档 类 型 : ASP VBSeript 


记录 集 ( 查询 ) ame) 
1 » 
显示 上 = 


| 转 到 详细 页 面 
转 到 相关 页 面 

















(10 ) 在 【文档 】 窗 口中 通过 拖 动 鼠标 选中 “结束 会 hea | 
话 ”文本 。 执 行 菜单 栏 中 的 【 窗口 ] 一 【 服务 器 行为 】 -sr 和 
命令 ， 打 开 【 服务 器 行为 】 面板 。 单 击 该 面板 上 “+” 按 和 
钮 ， 从 打开 的 菜单 中 选择 【 用 户 身份 验证 】 命 令 ， 从 打 EE ws | 


开 的 子 菜单 中 选择 【 注销 用 户 命令 ， 为 所 选中 的 文本 


| ee 图 4-54 注销 用 户 命令 
添加 一 个 结束 会 话 的 服务 器 行为 ， 如 图 4-54 所 示 。 
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(11 ) 此 时 则 会 打开 【 注销 用 户 】 对 话 框 。 在 该 对 话 框 中 进行 如 下 设置 。 
@ 在 该 对 话 框 中 的 【在 以 下 情况 下 注销 】 栏 中 选中 【 单 击 链接 】 单 选 按钮 ， 单 击 文本 
框 右边 的 三 角 按钮 六 ， 在 打开 的 下 拉 菜 单 中 选择 【 所 选区 围 : “结束 会 话 ”" 】， 设 置 结 
会 证 动作 的 触发 事件 是 网 页 中 的 “结束 会 十 ”文本 被 单 击 。 
@ 在 【在 完成 后 ， 转 到 】 文本 框 中 输入 logout.asp， 设 置 结束 会 话 后 ， 切 换 到 
logout.asp 页 面 。 
完成 后 的 设置 如 图 4-55 所 示 。 





在 以 下 情况 下 注销 : 局， 单 击 链接 : 所 选 范围 : “结束 会 话 " 


中 页面 载 六 
在 完成 后 ， 转 到 |: 





4-55， 设置 完成 后 的 【 注销 用 户 】 对 话 框 


十 几 县 和 人 | 行为 RIES ( 12 ) 设置 完成 后 ， 单 击 【 确定 】 按 钮 ， 关 闭 该 对 
人 话 框 ， 返回 到 【文档 】 窗 口 。 在 【 服务 器 行为 】 和 面板 


动态 代 林 [Gession. 了 username) Ny ee _ 
注销 用 户 中 增加 了 一 个 【注销 用 户 】 行 为 ， 如 图 4-56 所 示 。 同 


时 可 以 看 到 “结束 会 话 ” 链 接 文本 对 应 的 【属性 检查 
器 面板 中 的 【 链接 】 属 性 值 为 《&%=MM_Logout%>， 如 
i | 冬 2 一 国 二 二 

时 则 4_56 【服务 器 行为 ] 面板 4 一 57 所 示 ， 它 是 Dreamweaver CS6 自动 生成 的 动作 





劳 基 人们 








对 象 。 
属性 
| <>》 HTML| ”格式 个 ) 段落 强 | syle3 “上 了 广 注 夫 此 标题 如 ) 
配 Es: DC) | 无 “| 链接 让) | 人 = MLogout%》 加 目标 的 Y 
=E| 单元 格 “水平 久 ) 默认 并 全) 不 换行 0) 门 背景 颜色 (6) | -| #CF1FF 页面 原 
一 0 六 ， 重 直 说 )| 默认 ~ 高 0) 标题 吴 ) 癌 ] 


po 4-57 ”表单 对 应 的 【 属性 检查 器 】 面 板 
( 13 ) 执行 菜单 栏 中 的 【文件 】 一 【保存 】 命令 ， 将 该 文档 保存 到 本 地 站 点 中 。 编 辑 工 
作 完 成 后 ， 将 相关 的 网 页 保存 并 上 传 到 远程 站 点 ， 就 可 以 测试 该 登录 系统 的 执行 情况 了 。 
4.3.3 ”登录 系统 的 出 试 


制作 好 一 个 系统 后 ， 需 要 进行 测试 才能 上 传 到 服务 絮 使 用 。 下 面 就 对 登录 系统 进行 测 
训 ， 疯 试 的 步骤 如 下 。 
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(1 ) 打开 IE 浏览 器 ， 在 地 址 栏 中 输入 
http:/127.0.0.1user/defautt.asp， 打 开 defaut. 
asp 文件 ， 如 图 4-58 所 示 。 


ES 2S, 了 icroso ft TInternet Ezxplorer 
: 文件 到 ) ”编辑 区 ) ”查看 上 ) 收藏 和 ) 工具 (I) 帮助 岂 针 


四 齐 :- 加 -的 a 人 门 才 让 收藏 天 On 出 . 局 
. a5P 


:地址 | 掩 村 ttp -712 T.0.0. 1/user be 站 国 千 | 














4-58 打开 default.asp 文件 


) 在 网 页 的 表单 对 象 的 文本 框 及 密码 
框 中 输入 用 户 名 及 密码 ， 输 入 完毕 ， 单 击 
J 按钮 。 
) 如 果 在 第 二 步骤 填写 的 登录 信息 是 
人 或 者 根本 就 没有 输入 ， 则 浏览 器 就 
nl a loginfail.asp, 
显示 登录 销 误 信息 ， 如 图 4-59 所 示 。 


习 登陆 关 败 一 icrosoft Internet Explorer 
文件 灾 ) ”编辑 正 ) 查看 收藏 入 工具 民 I) 大助 山 


Oa-© 四 加 的 有 时 克 tax Om @ 全: 
地 址 0) 钨 | http: /127.0.0. 1/user/loginfail. asp v| 转 到 
登录 失败 


登录 失败 ,请 您 检查 用 户 名 和 密码 是 否 正 确 








单 击 这 里 重新 登录 








图 4-59 登录 失败 页 面 loginfail.asp 显示 效果 


4 ) 如 果 输 入 的 用 户 名 和 密码 都 正确 ， 
则 切换 到 welcome.asp 页 和 面 ， 显 示 登 录 成 功 
到 这 里 登录 系统 就 完成 了 ， 只 需要 更 


4.4 


会 员 登 录 系 统 是 为 数据 





(已 5 同时 ， 网 页 中 显示 登 录用 户 名 ， 如 图 | 
4-60 所 示 。 这 是 因为 在 网 页 中 设置 了 名 为 E 
MM_username 的 阶段 变量 。 | 


GA wax ur @ 加 - 


http; /127, 0.0 I/usnr/veleme sp 


国 - 加 


欢迎 界面 
靳 杂 综 只 ， 欢 凶 吕 : 小 下 
修 光 你 的 放生 这 可 


图 4-60 登录 成 功 页 面 welcome.asp 显示 效果 
(5) 如 果 想 结束 会 请 ， 只 需要 单 击 
“结束 会 请 ”链接 文本 即 可 。 结 束 会 十 
后 ， 浏 贤人 颖 就 会 切换 到 页 和 面 logout.asp 
( 该 页 面 要 事先 设计 好 )， 同 用 户 显 示 出 结 


会 话 成 功 的 信息 。 这 个 页 和 面 也 需要 进行 
单独 的 制作 ， 方 法 同 前 面 一 样 。 如 果 想 重 
新 登录 ， 只 需要 单 击 “ 这 里 ”链接 文本 ， 
就 可 以 切换 到 页 面 default.asp 重新 登 
录 ， 如 图 4-61 所 示 。 


交 伸 在) 情 强 下 1 查看 由 收藏 避 工具 本 i 本 有 剖 ) 


是 |] HH pT Dh 和 mr erest ,ETP 


会 话 结束 


谢谢 放 的 诗 问 ， 烧 已 坚实 二 证 丧 完 二 上 


阜新 阳 录 请 里 击 这 里 





图 4-61 结束 会 请 成 功 


育 景 效果 就 可 以 完成 很 好 的 页 面 制作 。 


会 员 当 册 功 能 月 EL 设计 


库 中 已 有 的 旧 用 户 登 录用 的 ， 一 个 会 员 管 理 系 统 还 


要 有 新 用 户 
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Cub 


注册 用 的 功能 。 对 于 新 用 户 来 说 ， 通 过 单 击 default.asp 页 面 上 的 “新 用 户 注册 ”链接 文 
本 ， 进 入 到 名 为 register.asp 的 页 面 ， 注 册 个 人 信息 。 接 下 来 就 介绍 用 户 注册 功 能 的 设计 。 


4.4.1 注册 系统 主页 面 
register.asp 页 面 用 于 新 用 户 进行 注册 ， 新 用 户 注册 的 操作 就 是 同 system.mdb 数据 库 中 
的 User 表 添 加 记录 的 操作 。 将 要 完成 的 页 面 如 图 4-62 所 示 。 


ES :4 ft Internet Explorer 
: 交 件 还) 编辑 区) 查看 ”收藏 扩 工具 (I) 帮助 岂 ) 


Om- 日 四 国人 /时 六 wax 对 朵 加 全 -对 国 - 








; 地 址 ) 3| http://127.0.0. /user/reegister. asp 








| 用 户 名 : 
密码 : 











密码 验证 : 
真实 姓名 : 
性 别 : 

电子 邮件 : 
密码 提示 问题 : 
密码 提示 管 案 : 


| 












































国 图 4-62 注册 系统 的 主页 面 样式 


设计 步骤 如 下 。 
| (1 ) 启动 Dreamweaver CS6， 执 行 菜 单 栏 中 的 【文件 】 一 【 新建] 命令， 打开 【新 建文 
档 】 对 话 框 ， 新 建 一 个 动态 的 ASP _ VBScript 文档， 输入 网 页 标题 “用 户 注 册 ”。 执 行 菜单 栏 
中 的 【文件 】 一 【保存 】 命 令 ， 在 站 点 中 将 该 文档 保存 为 register.asp。 
(2 ) 使 用 Dreamweaver CS6 中 提供 的 制作 静态 网 页 的 工具 ， 完 成 如 图 4-63 所 示 的 静态 





TD: \site\user\Reeister. asp* = EI 


Ea 



































v 
人 body> [RD 100% v700 x 446v 29 下 /5 秒 简体 中 交 (6B2312) 











| 图 4-63 register.asp 页 面 静 态 设计 
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六 7 兼职 指导 : 

在 为 表单 对 象 命 名 时 ， 由 于 表单 对 和 象 中 的 内 容 将 被 添加 到 user 表 中 ， 可 以 将 表单 对 象 命 
名 为 域 相应 字段 相同 名 称 。 例 如 表 用 于 添加 用 户 名 的 文本 框 命 名 为 username， 把 用 于 添加 密 
码 的 文本 框 命名 为 password 等 。 这 样 做 的 目的 是 ， 当 该 表单 中 的 内 容 添 加 到 user 表 中 时 会 
自动 配对 。 文 本 “确认 密码 ”对 应 的 文本 框 命名 为 password1。 

( 3 ) 还 需要 设置 一 个 验证 表单 的 动作 ， 用 来 检验 浏览 者 在 表单 中 填 与 的 内 容 是 售 满 足 数 
据 库 中 表 user 中 字段 的 要求 。 这 样 可 以 在 将 用 户 填 写 的 注册 资料 提交 到 服务 器 之 前 ， 就 会 
对 用 户 填写 的 资料 进行 验证 。 如 果 有 不 符合 要 求 的 信息 ， 就 可 以 向 浏览 者 显示 错误 的 原因 ， 
并 让 浏览 者 重新 输入 。 执 行 菜 单 栏 中 的 【 窗口 】 一 【行为 ] 命令 ， 打开 【行为 】 和 面板 。 单 击 
【行为 】 面 板 中 的 “+” 按 钮 ， 从 打开 的 行为 列表 中 选择 【 检查 表单 】 对 话 框 ， 添 加 验证 表单 
的 动作 ， 则 会 打开 【 检查 表单 】 对 话 框 。 


( 4 ) 在 该 对 话 框 中 进行 如 下 设置 。 

@ 设置 username 文本 域 的 验证 条 件 为 
【 值 ] 必需 的 ,【 可 接受 } 任何 东西 。 
即 该 文本 域 必 须 填 写 ， 不 能 为 空 。 

@ 设置 truename 文本 域 的 验证 条 件 为 
【 值 ] 必需 的 ,【 可 接受 】 任何 东 
西 。 意 义 同 username。 

@ 设置 password 文本 域 的 验证 条 件 为 
【 值 ] 必需 的 ,【 可 接受 】 任何 东 
西 。 意 义 同 username。 

@ 设置 passwordl 文本 域 的 验证 条 件 为 
【 值 ] 必需 的 ,【 可 接受 】 任何 东 


该 动作 完成 后 的 设置 如 图 4-64 所 示 。 


值 : 必需 的 


可 接受 名” 性 何 杰 西 (LO 数字 
口 电子 邮件 地 址 口 数字 人 | | 到 | | 


西 。 意 义 同 username。 

@ 设置 Email 文本 域 的 验证 条 件 为 
【 值 ] 必需 的 ,【 可 接受 ]， 电 子 信件 
地 址 < 

@ 设置 question 文本 域 的 验证 条 件 为 
【 值 ] 必需 的 ,【 可 接受 】 任何 东 
西 。 意 义 同 username。 

@ 设置 answer 文本 域 的 验证 条 件 为 
【 值 ] 必需 的 ,【 可 接受 】 任何 东 
西 。 意 义 同 username。 





图 4-64 设置 【 检查 表单 】 动 作 


( 5 ) 设置 完成 后 ， 单 击 【 确定 】 按 钮 ， 


返回 到 【 文档】 窗口 。 在 对 应 的 【 行为】 面板 中 
设置 该 动作 的 触发 事件 为 : onSubm 让 ， 设 置 完成 后 如 图 4-65 所 示 。 
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标签 检查 器 六 谨 守 当 
属 t 


区 





生 | 行为 | 标签 <form》 


normubmit 





[图 4-65 ”设置 行为 动作 


3 兼职 指导 : 

在 该 网 页 中 可 以 看 到 设置 了 两 个 填写 密码 的 文本 域 ， 这 样 做 的 目的 是 让 用 户 连 续 两 次 输 
入 密码 内 容 ， 如 果 两 次 输入 的 密码 一 致 ， 则 服务 器 接受 密码 。 这 样 可 以 避免 用 户 在 输入 密码 
时 按 错 键 造成 密码 丢失 。 但 是 Dreamweaver CS6 的 验证 表单 动作 没有 提供 检查 密码 一 致 性 的 
功能 ， 还 需要 在 源 代码 中 加 入 一 段 简单 的 程序 ， 来 实现 这 种 功能 . 


(6) 在 【文档 】 窗 口中 单 击 工具 栏 上 的 代码 按钮 堆 |， 切 换 到 代码 编辑 窗口 ， 然 后 在 验 
证 表单 动作 的 源 代码 中 加 入 如 下 代码 : 


if (MM findObj('password').value!=MM findObj(password1").value) errors += -两 次 密码 输入 不 一 致 \n'; 


修改 后 该 动作 的 源 代 码 如 下 ( 其 中 加 粗 的 文本 是 检查 密码 一 致 性 的 代码 及 更 改 的 中 
文 显示 ): 


function MM validateForm() { //v4.0 
var 1,p,q,nm,test,num,min,max,errors=",args~=MM validateForm.areuments; 
for (1=0; 1<(args.length-2); 1+=3) { test=args[1+2]; val=MM findObj(args[1]); 
if (val) { nm=val.name; 1f ((val=val.value)!="") { 
tf (test.indexOf(1sEmail')!=-1) { p=val.indexOf('(®'); 
if (p<1 一 一 p==(val.length-1)) errors+='- +nm+ must contain an e-mail address.\n'; 
} else 1f (test!="'R') { num = parseFloat(val); 
1f (1sSNaN(val)) errors+='- +nm+' must contain a number.\n'; 
if (test.indexOf('inRange') != -1) { p=test.indexOf(':'); 
min=test.substring(8,p); max=test.substring(p+1); 
if (num<min 一 一 max<num) errors+='- nm+ must contain a number between +mint+' and 
十 maxX 十 AD 
} } } else if (test.charAt(0) == 'R') errors += -+nm+' 需要 输入 . \n'; } 
} 
if (MM _findObj('password').value!=MM _findObj('‘password1').value) errors += "- 两 次 密码 输入 
不 一 致 n'; 
if (errors) alert(" 注 册 时 出 现 如 下 错误 :n'+errors); 
document.MM returnValue = (errors == "); 


编辑 代码 完成 后 ， 单 击 工具 栏 上 的 碳 | 按钮， 返回 到 【 文档 】 窗 口 。 

此 时 ， 可 以 测试 一 ee 
相同 ， 肯 定 不 一 致 )， 然 后 单 击 【 确认 】 按 钮 ， 提 交 表 单 中 填写 的 内 容 。 此 时 则 会 打开 一 
警告 框 ， 图 4-66 中 的 警告 框 告诉 浏览 者 两 次 密码 输入 不 一 致 。 


| 工 TirtEIITET 上 开 旦 De | 


注册 时 出 现 如 下 错误 : 
狼 - username 布 轩 办 六 . 
- Fassword 布 于 办 六 . 


-— qesti on 硕 替 输 上 . 
一 artsWer TD 


辆 ， 
- 隔 这 密码 输 六 . 沾 一 致 





4 一 66 ”提示 错误 , 


be 
) 接 下 来 就 应 该 在 数据 库 中 添加 一 条 用 户 记 录 ， 把 这 些 合格 的 数据 添加 a 到 这 条 记录 的 

i es i ered 执行 菜单 栏 中 
的 【窗口 ] 一 【服务 器 行为 ] 命令， 打开 【 服务 器 行为 】 面 板 。 单 击 该 面板 上 的 “+” 号 按 
钮 ， 从 打开 的 荣 单 中 选择 【 插入 记录 】 命 令 ， 则 会 打开 【 插入 记录 】 对 话 框 。 

( 8 ) 在 该 对 话 框 中 进行 如 下 设置 。 

@ 从 【连接 】 下 拉 菜 单 中 选择 connuser 作为 数据 源 连接 对 象 。 

@ 从 【插入 到 表格 】 下 拉 菜 单 中 选择 user 作为 使 用 的 数据 库 表 对 象 。 

@ 在 【插入 后 ， 转 到 】 文 本 框 中 设置 当 记 录 成 功 添 加 到 表 title 后 ， 切 换 到 regok.asp 


网 页 。 
@ 在 该 对 话 框 下 半 部 分 中 ， 将 网 页 中 的 表单 对 象 和 数据 库 中 表 User 中 的 字段 一 一 对 应 
起 来 。 


设置 完成 后 该 对 话 框 如 图 4-67 所 示 。 


连接 : | connuser 
插入 到 表格 : | user 
插入 后 ， 转 到 |: Lasery regok. asp 

















获取 值 自 torm 


表单 元 素 : | ud 








到 |: USername 
二 为、 








4-67 ”设置 完成 后 的 【插入 记录 】 对 话 框 


(9 We 单 击 【 确定 】 按 钮 ， 关闭 该 对 话 框 ， 返回 到 【 文档】 窗口 。 
( 10 ) 用 户 名 在 数据 库 表 中 为 天 键 字 ， 也 是 用 户 登 录 的 身份 标志 ， 用 户 名 是 不 能 重复 
ee TE WE 


LE 


0 


在 ， 则 不 能 进行 注册 。 在 Dreamweaver CS6 中 已 经 提供 了 一 个 检查 新 有 用户 名 的 服务 器 行 为 ， 
ee We a 

份 验证 】 一 【检查 新 用 户 名 命令， 如 图 4-68 所 示 ， 向 该 网 页 添加 检查 新 用 户 名 的 服务 
和 负 行 为 。 














十 一 文档 类 型 : ASF VBScript 
“记录 集 ( 查询 ) 
命令 


重复 区 域 
记录 集 分 页 
显示 区 域 
动态 女 本 
















- ” 转 到 详细 页 面 
| 转 到 相关 页 面 


插入 记录 
| 更 新 记录 
| 删除 记录 
| 动态 表单 元 素 


登录 用 户 用 户 身 份 痊 证 有 


| 限制 对 页 的 访问 XSLT 转换 
| 

















5 
1 
q 六 
Eee 编辑 服务 器 行为 
| 新 建 服务 器 行为 
获取 更 多 服务 器 行为 2 





| 图 4-68 添加 【检查 新 用 户 名 】 的 服务 器 行为 


( 11 ) 此 时 会 打开 一 个 【检查 新 用 户 名 】 对 话 框 ， 在 该 对 话 框 中 进行 如 下 设置 。 

@ 在 【 用户 名 字段 】 下拉 菜单 中 选择 username 字段 。 

@ 在 【如 果 已 存在 ， 则 转 到 】 文 本 框 中 输入 regfail.asp， 表 示 如 果 用 户 名 已 经 存在 ， 
则 切换 到 regfail.asp 页 面 ， 显 示 注 册 失 风 信息 。 该 网 页 将 在 后 面 进行 编辑 。 

设置 完成 后 的 对 话 框 显示 如 图 4-69 所 示 





用 户 名 字 算 : [EEC 
如 果 已 存在 ， 则 转 到 : FF user/ regfail. asp 














国 图 4-69 设置 完成 后 的 【检查 新 用 户 名 】 对 话 框 


、 服务 二 行当 
到 。。。 (12 ) 设置 完成 后 ， 单 击 该 对 话 框 中 的 【确定 ] 按时 


器 行为 】 面 板 中 增加 了 -个 【检查 新 用 户 名 ] 行为， 岳 八 记录 请 音 “fornl 1 
如 图 本 所 示 。 

( 13 ) 执行 菜单 栏 中 的 【文件 】 一 【保存 】 命 令 ， 
oo 





国 图 4-70 【服务 器 行为 】 面 板 
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4.4.2 注册 成 功 和 失败 


es eke 便 浏 览 者 进行 登录 ， Er regok.asp 页 面 中 
从 有 时 出 现 如 上 请 育 - 设置 一 个 切换 到 default.asp 页 面 的 链接 对 象 ， 以 方便 用 


— Username Th 


— password Ee 户 进 行 登 录 。 同时 ， 为 了 方便 浏 览 者 重新 进行 注册 ， 应 该 
- Fasswaordl 入 


Ss ee 在 regfail.asp 页 面 设置 一 个 切换 到 register.asp 页 面 的 链 
A 接 对 象 ， 以 方便 用 户 进 行 重新 登录 。 本 小 三 制 作 显 示 注 册 
成 功 和 失败 的 页 面 信 息 ， 同 时 进行 注册 系统 的 测试 。 制 作 
完成 后 的 测试 结果 如 图 4-71 所 示 。 

( 1) 启动 Dreamweaver CS6， 执 行 菜单 栏 中 的 【 文 
件 】 一 【新建 ] 命令 ， 新 建 一 个 动态 的 ASP VBScript 文档 ， 命 名 为 regok.asp， 先 制作 注册 
成 功 的 页 面 。 设置 后 执行 菜单 栏 上 的 【 文件】 一 【保存 ] 合 令 ， i 沪 

(2 ) regok.asp 页 面 如 图 4-72 所 示 ， 制 作 比 较 简 单 ， 这 里 就 不 再 一 一 介绍 ， 其 中 “这 
里 ”文本 设置 为 指向 default.asp 页 面 的 链接 。 | 





图 4-71 测试 的 结果 


四 D:\site\user\regok. asp 


注册 成 功 ! 
苛 喜 您 ， 你 已 经 注册 成 功 * 
胡 单 击 这 里 进行 登录 











oy [Ryo% ~ 21K/3 秘 重合 中 六 (G23127| 时 
国 图 4-72 注册 成 功 regok.asp 页 面 


( 3) 如 采用 户 输入 的 注册 信息 不 正确 或 用 户 名 已 经 存在 ， 则 应 该 向 用 户 显 示 注 册 失 败 的 


信息 。 这 里 再 新 建 一 个 regfail.asp 页 面 ， 该 页 和 耐 的 设计 如 图 4-73 所 示 。 其 中 “这 里 ”文本 
设置 为 指向 es 页 看 的 链接 。 








中 D:\site\user\reefail.asp 


对 不 起 ， 用 户 名 已 经 存在 ， 


单 击 这 里 进行 重新 注册 











' 区 
<body> [RI 00%  v|636 x 329v| 21 kK /3 秒 | 简体 中 六 (6B2312) 


图 4-73 注册 和 失败 regfail.asp 页 面 
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4.4.3 注册 系统 的 测试 


情况 了 。 

(1 ) 打开 IE 浏 贤 郁 ， 
http://127.0.0.1/user/register.asp ， 
| register.asp 文件 ， 如 图 4-74 所 示 。 


在 地 址 栏 中 输入 
| 





| 广 伞 殖 )】 粮 且 电 } 辣 看 QW 收 语 员工 具 虹 是 动员 ) 


| 
| 地 二 


DIEAPSL pl 


i 性 | tis FFL. i. Dr ri 





























4-74 ”打开 的 测试 页 面 


(2 ) 可 以 在 该 注册 页 面 中 输入 一 些 不 正 
确 的 信息 ， 如 漏 填 一 些 username、password 
等 必 填 字段 ， 或 填写 非法 的 Email 地址， 或 在 
确认 密码 时 两 次 输入 的 密码 不 一 致 ， 以 测试 
网 页 中 验证 表单 动作 的 执行 情况 。 如 果 填 写 
的 信息 不 正确 ， 则 浏览 器 应 该 打开 警告 框 ， 
回 浏览 者 显示 铺 误 原因 ， 如 图 4-75 所 示 。 


本 用户 注 珊 一 性 有 二 身高 名 玉山 mt 下 和 


候 三 -加 四国 和 用 mr 言情 全 四 "各国 - 


皮 疆 恒 前 | iiy lar 0 0 forariraucielar, wep 











出 定 提 示 


国名 4--/5 
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编辑 工作 完成 后 ， 将 相关 的 网 页 保存 并 上 传 到 远程 站 点 ， 就 可 以 测试 该 注册 系统 的 执行 


(3 ) 在 该 注册 页 面 中 注册 一 个 已 经 存 
在 的 用 户 名 ， 如 果 输 入 “小 王 ”"， 用 来 测 
试 新 用 户 服务 局 行为 的 执行 情况 。 然 后 单 
击 【 确定 】 按 钮 ， 此 时 由 于 用 户 名 已 经 存 
在 ， 浏 充 画 会 和 目 动 切换 到 regfail.asp 页 
面 ， 如 图 4-76 所 示 ， 和 告诉 浏览 者 该 用 户 
名 已 经 存在 。 此 时 浏览 者 可 以 单 击 “ 这 
里 ”链接 文本 ， 返 回 register.asp 页 面 ， 
以 便 重 新 进行 注册 。 


BE | 注册 汪 富 BicreraTtt Trtanrrit 
二 竺 证 1 辆 酸 让 1) 亚 看 下 收 村 由) 工具 二 1 性 了 Nh 


四 人 -回回 国 的 月 ie 南 tax 交加 全- 马 国 - 


i 旺 | hp FIET ,路 由 Ltr ll, aeraitiraisd=' 自 


注册 失败 ! 

则 直到。 用户 韦 已 县 丰 在 ， 
请 避 六 断 的 用户 党 
单 击 记 里 运行 重新 证 朋 





4-76 注册 失败 页 面 显 示 


( 4 ) 在 该 注册 页 面 中 填写 如 图 4-77 所 
示 的 注册 信息 ， 然 后 单 击 【 确定】 按钮 。 


@ 鲁 - 轩 -上 四国 EA 站 PF 路 麻 到 ft 全 人 也 


地 这 区 | hetp 27T 0 0 osar/ arcirtar 5 


: 小 攀 


: 666066 


证 666666 
: 吏 小 梅 
:oO A © 有 x 
: ynetbousty. con 
: 我 的 陋 业 是 什么 3 
”医生 








面 图 4-77 填写 注册 信息 


5 ) 由 于 这 些 注 册 资 料 完 全 正确 且 这 个 sl 
用 户 名 没有 重复 ， 浏 览 器 会 切换 到 OO Bl 
regok.asp 页 面 ， 向 浏览 者 显示 注册 成 功 的 | Ee 
信息 ， 如 图 4-78 所 示 。 此 时 ， 浏 览 者 可 以 
单 击 “这 里 ”链接 文本 ， 切 换 到 
default.asp 页 面 ， 以 便 进 行 登录 。 注册 成 功 ! 


人 闫 喜多 ， 坚 已 公认 出 成 功 ? 
清单 击 这 轩 进 行 登 录 








国 图 4-78 注册 失败 页 面 显示 


6 ) 作为 系统 设计 ， 可 以 在 Access 中 打开 用 户 数 据 库 文 件 system.mdb， 查 看 其 中 的 3 
user 表 对 象 的 内 容 。 此 时 可 以 看 人 到， 在 该 表 的 最 后 ， 打 开 了 一 条 新 记录 ， 如 图 4-79 所 示 。 Le 
其 中 的 数据 就 是 刚才 在 网 页 register.asp 中 提交 的 注册 用 户 的 信息 。 


assword| truename | sex | Enail | uest 
123456 。 王 亚 悦 WarEg@hotmai1. com 我 的 职业 是 什么 ? 
111111 张 振 兴 rhanelBhotmail. com 我 的 家 多 在 哪里 ? 


222222 叶 田 田 tiantian8hotmail. com ”我 最 喜欢 的 动物 ?了 
ymB@ytbea 我 的 职业 是 什么 ? 


记录 : 14| 4|| 4 | nl* 米 | 共有 记录 数 : 4 
图 4-79 表 user 中 添加 了 一 条 新 记录 





这 个 实例 是 会 员 管 理 系 统 其 他 页 和 面 的 制作 和 测 试 ， 馆 过 学 习 和 掌握， 读者 可 以 自行 制作 
网 站 的 注册 系统 并 应 用 到 复杂 的 网 六 系统 中 。 


4.5 会员 资 料 修 改 功能 设计 


会 员 管理 系统 还 应 该 为 用 户 提供 修改 注册 资料 的 功能 ， 包 括 会 员 资料 修改 及 删除 的 操 
何 风 


UB 
作 。 实 际 上 ， 修 改 注册 用 户 的 过 程 就 是 更 新 记录 的 过 程 。 本 章节 介绍 如 何 实现 用 户 资 料 的 修 


改 及 删除 功能 。 


4.5.1 资料 修改 页 面 

该 页 面 主要 把 用 户 所 有 资料 都 列 出 ， 通 过 更 新 记录 的 命令 实现 制作 。 具 体 的 制作 步 
又 如 下 。 
] ) 首先 制作 用 户 修改 自己 注册 资料 的 页 面 。 该 页 面 和 用 户 注 册页 面 的 结构 十 分 相似 ， 
可 以 通过 对 register.asp 页 面 的 修改 来 快速 得 到 所 需要 的 记录 更 新 页 向 。 打 开 register.asp 
页 面 ， 执 行 菜单 栏 中 的 【文件 】 一 【 另存 为 】 命 令 ， 将 该 文档 另存 为 Userupdate.asp。 

( 2 ) 执行 菜单 栏 中 的 【窗口 】 一 【服务 嚣 行为】 命令， 打开 【服务 嚣 行为】 面板。 在 
【 服务 器 行为 】 面板 中 删除 全 部 的 服务 器 行为 。 该 页 面 修改 完成 后 如 图 4-80 所 示 。 
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四 D:\site\user\userupdate. asp* - 口 Xx 


五 了 
OND connuser. asp 





Cub 














< 本》 |] 池 100% v614 x 496v| 32 /5 秒 | 简体 中 文 (GB2312)| 


图 4-80 userupdate.asp 静态 页 面 


(3 ) 执行 菜单 栏 中 的 【 窗口 】 一 【 绑 定 】 人 命令， 打开 【 绑 定 】 面 板 ， 单 击 该 面板 上 
“十 ”号 按钮 ， 从 打开 的 荣 单 中 选择 【 记录 和 集 (人 查询) 】 命 令 ， 则 会 打开 【 记录 集 】 对 话 框 。 
| (4 ) 在 该 对 证 框 中 进行 如 下 设置 。 
@ 在 【 名称】 文本 框 中 输入 Recordsetl 作为 该 记录 集 的 名 称 。 
@ 从 【连接 】 下 拉 菜 单 中 选择 connuser 数据 源 连 接 对 象 。 
@ 从 【和 表格 】 下 拉 菜 单 中 ， 选 择 使 用 的 数据 库 表 对 象 为 user。 
| @ 在 【 列 】 栏 中 先 选 择 【 全 部 】 单 选 按钮 。 
@ 在 【筛选 】 栏 中 设置 记录 集 过 滤 的 条 件 为 :username : =:， 阶段 变量 . 
MM_usernameo 
完成 后 的 设置 如 图 4-81 所 示 。 


ES 











: IRecordsetl 








: Iconnuser 








: |user 














1 
: |serItame 














阶段 变量 
加 无 























国 图 4-81 定义 记录 集 


(5 ) 设置 完成 后 ， 单 击 该 对 话 杠 上 的 【 确定】 按钮， 关闭 该 对 话 框 。 返 回 到 【文档 】 窗 
口 ， 这 里 绑 下 对话 框 就 绑 定 了 个 记录 集 。 
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(6 ) 然后 将 Recordsetl 记录 集中 的 字段 绑 定 到 页 和 面 中 相应 的 位 置 上 。 

(7 ) 对 于 网 页 中 的 单 选 按钮 组 sex 对象， 绑 定 动态 数据 可 以 按照 如 下 方法 。 单 击 【 服务 
为 】 面 板 上 的 “+” 号 按钮 ， 从 打开 的 菜单 中 选择 【 动态 表单 对 象 】 一 【 动态 单 选 按 
钮 命令， 设置 动态 单 选 按 钮 组 对 象 。 打 开 
【 动态 单 选 按钮 】 对 话 框 ， 从 【 单 选 按钮 组 】 
下 拉 菜 单 中 选择 forml 表单 中 的 单 选 按钮 组 
sex。 单 击 【 选取 值 等 于 】 文 本 框 后 面 的 划 | 按 
钮 ， 从 打开 的 动态 数据 列表 框 中 选择 记录 集 
Recordset1l 中 的 Sex 字段 。 设 置 完成 后 的 对 话 


DH /一 


月 站 了 
































<%= (Recordsetl. Fields. Item("sex”") 加 








4-82 ”设置 动态 单 选 按钮 框 如 图 4-82 所 示 。 | 

(8 ) 用 鼠标 将 数据 绑 定 到 页 面 上 相应 的 位 置 后 ， 文 档 的 显示 如 图 4-83 所 示 。 | 
TD:\sitehuser\userupdate. asp = alt™ 了 二 
eh conmuser. asp | 
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7 I Io0% ~v|614 x 496v 36 /6 秒 | 简体 中 六 (GB2312) 
而 多 4-83 绑 定 动态 内 容 后 的 Userupdate.asp 页 面 

( 9 ) 单 击 【服务 器 行为 】 面 板 上 的 “+” 号 按钮 ， 从 打开 的 菜单 中 选择 【 更 新 记录 】 命 
令 ， 为 网 页 添加 更 新 记录 的 服务 器 行为 。 

( 10 ) 此 时 ， 会 打开 【更 新 记录 】 对 话 
框 ， 该 对 话 框 与 插入 记录 的 对 话 框 十 分 相 
似 ， 具 体 的 设置 情况 如 图 4-84 所 示 ， 这 里 
不 再 重复 。 








Da /一 





人 
要 更 新 的 表格 : | user 














选 职 记录 自 : | ecordse 
唯一 键 列 : | username 
在 更 新 后 ， 转 到 : fuser/userupdateok. as 











( 11 ) 设置 完成 后 ， 单 击 【 确定 】 按 
钮 ， 关闭 该 对 话 框 ， 返回 到 【 文档】 窗口。 

( 12 ) 执行 菜单 栏 中 的 【文件 】 一 【 保 
存 】 命 令 ， 将 该 文档 保存 到 本 地 站 点 中 。 


六 兼职 指导 : 
由 于 本 页 的 MM username 值 是 来 自 上 





获取 值 自 : |forn 





USername sername 
表单 元 素 : password 更 新 [3 "password” 忆 
asswordl “ 江 略 > 
更 新 列 "t+ 

sex 更 新 下 "sex” (人 本) 
mail 岂 新 列 "Email” [ 诬 本 ) 


列 | Username 
提交 为 : | 文本 











4-84 【更 新 记录 】 对 话 框 


125 


126 


一 页 注册 成 功 后 的 用 户 名 值 ， RE 要 先 登 录 后 ， 在 登录 成 功 页面 
单 击 “修改 个 人 资料 ”链接 到 该 页 面 才 会 产生 效果 ， 这 在 后 面 的 测试 实例 中 将 进行 介绍 。 


4.5.2 ”修改 成 功 页 面 


用 户 修 改 注册 资料 成 功 后 ， 就 会 切换 到 userupdateok.asp。 在 该 网 页 中 ， 应 该 占用 户 显 
示 资 料 修改 成 功 的 信息 。 同 时 如 果 用 户 想 继续 修改 资料 的 话 ， 应 该 为 用 户 提 供 一 个 返回 到 
userupdate.asp 页 面 的 链接 文本 。 如 果 用 户 不 需要 修改 ， 则 应 该 为 用 户 提 供 一 个 切换 到 
welcome.asp 页 面 的 链接 文本 。 为 了 向 用 户 提 供 时 加 友好 的 界面 ， dn 
的 结果 ， 以 便 用 户 检 查 修改 是 否 正确 。 

具体 的 制作 步骤 如 下 。 

( 1 ) 执行 荣 单 栏 中 的 【文件 】 一 【新建 】 命 令 ， 新 建 一 个 动态 的 ASP VBScript 文档 ， 命 
名 为 userupdateok.asp。 设 置 后 执行 菜单 栏 中 的 【文件 ] 一 [ 保存 命令 ， 在 站 点 中 保存 这 
个 页 面 。 

(2 ) 为 了 向 用 户 提 供 更 加 友好 的 界面 ， 应 在 网 页 中 显示 用 户 修改 的 结果 ， 以 便 用 户 检 圣 
修改 是 否 正 确 。 为 了 实现 该 目的 ， 首 先 应 该 定义 一 个 记录 集 eh 
userupdate.asp 中 定义 记录 集 的 方法 一 样 。 然 后 在 网 页 中 建立 一 个 表格 ， 通 过 在 表格 中 添 
记录 集中 的 动态 数据 对 象 ， 把 用 户 修改 后 的 信息 显示 在 表格 中 ， 如 图 4-85 所 示 。 


四 | D:\site\user\userupdateok. asp eat 


Pav 
和 时 二 总 和 connuser. asp 





Ba 


资料 修改 成 功 


禾 改 后 的 资料 如 下 ， 如 还 需要 进行 更 疏 请 单 击 这 里 。 















































v 
<body> [RD 100% v614 x 496v 30 /5 秒 简体 中 站 (6B2312) 











各 图 4-85 资料 修改 成 功 的 页 面 


4.5.3 删除 会 员 功 能 


接 下 来 制作 页 面 userdelete.asp， 这 个 页 面 是 用 来 删除 用 户 的 。 具 体 的 制作 步骤 如 下 。 
(1 ) 执行 菜单 栏 中 的 【文件 】 一 [新建] 命 命令 ， 新 建 一 个 动态 的 ASP VBScript 文档 ， 执 
se 【文件 】 一 【 保存 】 命 令 ， 将 其 保存 为 userdelete.asp。 
) 首先 在 welcome.asp ee 切换 到 用 户 记 录 删 除 页 面 userdelete.asp 


的 链接 对 象 。 打 开 welcome.asp 页 面 ， 输 入 “删除 用 户 ” 并 在 【 属性 检查 器 】 面 板 中 的 【 链 
接 】 文 本 框 中 输入 userdelete.asp， 设 置 后 的 welcome.asp 页 面 如 图 4-86 所 示 。 


TD:\sitehuser\welcome. asp = El 








民怨 Q 100% v614 x 338v 23 /4 秒 简体 中 交 (6B2312) 


国 到 4 一 86 加 入 “删除 用 户 ” 链接 


3 ) 切换 回 userdelete.asp 页 面 ， 由 于 需要 在 Userdelete.asp 页 面 中 显示 用 户 注册 的 信 
二 ee 个 记录 集 ， 其 方法 跟 制作 页 面 userupdate.asp 中 定义 记录 集 的 方法 一 样 。 
) 打开 【插入 】 一 【表单 】 一 【表单 】 命 令 ， 在 【文档 】 窗 口中 插入 一 个 表单 。 
) 将 鼠标 指针 放置 在 表单 中 ， 执 行 菜单 栏 上 的 【插入 】 一 【表单 】 一 【按钮 ] 命令， 
本 。 按钮 ， 并 通过 对 应 的 【属性 检查 器 】 和 面板 将 该 表单 的 动作 设置 为 提交 表 
单 ， 修 改 为 “确定 注销 ”"。 设 计 后 的 页 面 如 图 4-87 所 示 。 


号 - 
Dw 


bw) D:\site\user\userdelete. asp* = El 








二 和 
RRA connuser. asp 


[ si | 


删 际 用 三 


注销 后 将 无 法 恢复 ， 





您 确定 注销 吗 ? 


~ 


Pee = 





(RW A los v6l4x 34v 3kKAA4 和 和 重逢 中 文人 1 
硬 图 4-87 ”确定 注销 
( 6 ) 执行 菜单 栏 上 的 【 窗口 ] 一 【服务 器 行为 】 命令 ， 打开 【服务 器 行为 】 和 面板 。 单 击 
该 面板 上 的 “+” 号 按钮 ， 从 打开 的 荣 单 中 选择 【 删除 记录 】 人 命令 ， 则 会 打开 【 删除 记录 j 
对 十 框 。 
(7 ) 在 该 对 话 框 中 进行 如 下 设置 : 
@ 从 【连接 】 下 拉 菜 单 中 选择 connuser 作为 数据 源 连 接 对 象 。 
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[ 了。 。 从 【从 表格 中 删除 ] 下 拉 菜 单 中 选择 user 作为 使 用 的 数据 库 表 对 象 ， 即 存储 讨论 主 


题 的 表 对 象 。 
@ 从 【选取 记录 自 】 下 拉 菜 单 中 选择 Recordset1l 记录 集 作 为 要 删除 的 记录 对 象 。 
@ 从 【 唯一 键 列 】 下 拉 菜 单 中 选择 主键 字段 为 ID。 
@ 从 【提交 此 表单 以 删除 】 下 拉 菜 单 中 选择 forml。 
@ 在 【删除 后 ， 转 到 】 栏 中 设置 记录 成 功 删除 后 ， 转 到 userdeleteok.asp 网 页 。 
设置 完成 后 该 对 证 框 如 图 4-88 所 示 。 








连接 : | connuser 
从 表格 中 册 除 : | user 

















选 职 记录 上 自 : (Recordsetl 





唯一 键 列 : ID 
提 变 此 表单 以 删除 :| forml 
册 除 后 ， 转 到 : /user/userdeleteok. asp| 























图 4-88 设置 完成 后 的 【 删除 记录 】 对 话 框 


加 设置 完成 后 ， 单 击 【 确定 】 按 钮 ， 关 闭 该 对 话 框 ， 返 回 到 【 文档】 窗口 。 
) 由 于 删除 记录 的 操作 是 不 可 近 回 的 ， 所 以 应 该 在 页 面 中 设置 让 用 户 取 消 删 除 操作 的 
本 和 【文档 】 窗口 中 输入 “ 单 击 此 处 取消 ”文本 ， 然 后 设置 该 文本 链接 到 welcome.asp 
页 面 。 
该 页 面 制作 完成 后 如 图 4-89 所 示 。 


| 四 D:\site\user\userdelete. asp = El 





E 源 蕉 ) Cormuser. asp es 
| rg ' 底 


删 际 用 三 


注销 后 将 无 法 恢复 ， 您 确定 注销 吗 ? 



































: 国 
<body》 [RI A 00% vlT10x 495v 3XA75 秒 简体 中 文 (GB2312) 


图 4-89 ”userdelete.asp 页 面 


( 10 ) 执行 菜单 栏 中 的 【文件 】 一 【 保存】 命令， 将 该 文档 保存 到 本 地 站 点 中 。 
(1 当 用 户 注销 身份 成 功 后 ， 就 会 切换 到 显示 注销 身份 成 功 的 信息 ， 同 时 还 应 该 结束 
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该 用 户 的 会 话 对 象 。 接 下 来 制作 页 面 userdeleteok.asp， 首 先 制作 注销 身份 成 功 的 静态 网 页 | 
效果 ， 如 图 4 一 90 所 示 。 | 


四 D:\site\user\userdeleteok. asp 





删 际 成 功 


您 的 用 户 信 息 已 经 删除 成 功 


| 
| 
| 
| 
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I< 








body> [RI 100% v586 x 269v 21 kK /3 秒 简体 中 净 (GB2312) 


| 图 4-90 ”userdeleteok.asp 页 面 静态 设计 效果 
( 12 ) 执行 菜单 栏 中 的 【窗口 】 一 【服务 器 行为 】 人 命令， 打开 【服务 品行 为 】 面 板 。 单 
击 该 面板 上 的 “+” 号 按钮 ， 从 打开 的 菜单 中 选择 【 用 户 身 份 验证 】 一 【 注销 用 户 】 命 令 ， 
则 会 打开 【 注销 用 户 】 对 话 框 。 在 该 对 话 框 中 的 【 在 以 下 情况 下 注销 】 栏 中 选择 【页面 载 
入 】 单 选 按钮 ， 如 图 4-91 所 示 。 


在 以 下 情况 下 注销 : C) 单 击 链接 ;| 人 建新 放 
@) 页 面 载 信 
在 完成 后 ， 转 到 : |maserydefault.asp 














图 4-91 【注销 用 户 】 对 话 框 
单 击 【 确定 】 按 钮 ， 完 成 删除 页 面 的 设计 。 


4.5.4 资料 修改 测试 
言 律 要】 症 别 让) 十 看 拉 了 歌 机 由 I 工具 i 雪 隐 炳 1 编辑 工作 完成 后 ， 就 可 以 测试 该 资料 修改 


圭 
7 
(1 ) 打 开 IE 浏览 器 ， 在 地 址 栏 中 输入 
et http://127.0.0.1/user/default.asp, #J 开 default. 
ee asp 文件 ， 在 该 页 面 中 进行 登录 。 登 录 成 功 后 ， 
pg: 单 击 “修改 您 的 注册 资料 ”链接 文本 ， 切 换 人 到 


芭 网 G6 


二 请 有 克 :| B00665 USerupdate.asp 出 向 如 4—92 所 示 。 


真 遍 好 交 3 丙 十 二 


uN: © a o Ms (2 ) 首先 可 以 在 该 页 面 中 输入 一 些 不 正确 


电子 凤 病 :yb 


穴 破 十 示 问题 ; 牧 的 职 枉 晕 改 必 ? ~ ~ N\ 
的 信息 ， 如 : 漏 填 username、password 等 必 填 


霹 吃 提 巴 和 莹 夯 1 医生 


站 站 | 字段， 或 填写 非法 的 Email 地 址 ， 或 在 确认 密 


LT 





码 时 两 次 输入 的 密码 不 一 致 ， 以 测试 网 页 中 验 
0 证 表单 动作 的 执行 情况 。 如 果 填 写 的 信息 不 正 


(ee 


确 ， 则 浏览 颖 应 该 打开 警告 杠 ， 疝 浏览 者 显 
不 销 应 原因 。 mr 国 国 监 a 本 奢 wr 本 本 .号 i 
) 在 该 页 面 中 进行 一 些 修改 ， 然 后 单 TI CE 
击 【 确认 】 按 钮 将 修改 结果 发 送 到 服务 器 a 2 
| 新 。 当 用 户 记 录 蝎 新 成 功 后 ， 浏 贤 器 会 切换 季 
到 userupdateok.asp 页 和 面 中 ， 显 示 资 料 修改 资料 修改 成 功 
| 成 功 的 信息 ， 同 时 显示 了 该 用 户 修改 后 的 资 和 
”″” 料 信息 ， 并 提供 切换 到 资料 修改 页 面 和 切换 
”到 主页 面 的 链接 对 象 ， 这 里 对 性 别 进行 了 修 
改 ， 效 果 如 图 4-93 所 示 。 








此 镁 引 芝 问题 : 我 的 四 站 是 慎 各 ? 





| ) 在 Access 中 打开 用 户 数据 库 文件 | sanier 本 
| user.mdb， 查 看 其 中 的 user 表 对 象 的 内 容 。 三 
此 时 可 以 看 到 该 用 户 对 应 的 记录 内 容 已 经 修 司 图 4-93 更 新 记录 成 功 显示 页 面 
改 为 用 户 提交 的 数据 了 ， 如 图 4-94 所 示 。 
转 user : 表 回回 四 
nme pessnord tenane se El ti ster hthority, 
wanelhotmail. com 我 的 职业 是 什么 他 重 事 长 
rhanathotmall. com 我 的 家 多 在 哪里 ? 福建 省 
| : tianti anBhotmail.com 我 最 喜欢 的 动物 ? 小 乌龟 
范 小 记 我 的 职业 是 什么 ? 


记录 : .4 | 二 || 4 Pb a |* 米 | 共有 记录 数 : 4 





\ 国 图 4-94 ” 表 user 中 更 新 了 记录 


) 同样 进行 删除 用 户 测试 。 通 过 单 击 “ 删 除 用 户 ” 中 的 “确定 注销 ”命令 就 可 以 实现 
4 一 95 所 示 。 


文 玫 人) 焕 异 多 ) 查看 人 只 本 人 工具 XI) 帮助 如 


eh © dn Du nx Ou 加 OH- 


中 hip: /N27 0 0 /fuser /usardelete ay 





/ 印 删除 用 户 


注 情 后 棕 无 法 疾 其 ,您 瑰 庆 广 销 忆 ? 


LLLALELE) 

元 1 六 

O Ms © Rr 
yneytbeuyty. con 

我 的 职 本 是 什么 7 





图 4-95 确定 注销 
上 述 测 试 结果 表明 ， 用 户 注 册 资 料 修改 系统 已 经 成 功 制作 。 通 过 用 户 注 册 资 料 修 改 系 统 
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的 优化 和 疯 试 实例 操作 ， 读 者 可 以 将 其 应 用 于 网 页 数据 库 的 测试 ， 实 现 注 销 、 修 改 数据 库 的 
功能 。 


4.6 找 回 用 户 注 册 资料 


在 新 用 户 注册 时 ， 要 求 新 用 户 提供 一 个 问题 和 答案 ， 然 后 利用 这 个 问题 和 答案 来 帮助 用 二 


户 技 回 遗失 的 密码 。 如 果 用 户 提供 的 答案 和 原 答案 相同 ， 就 可 以 找 回 遗 失 的 密码 。 本 节 主 要 并 
实现 站 点 中 的 密码 查询 功能 。 Per， 


4.6.1 ”查询 主要 页 面 


本 小 节制 作 密码 找 回 的 主要 页 面 lostpassword.asp， 有 具体 的 制作 步骤 如 下 。 -各 

(1 ) 执行 菜单 栏 中 的 【文件 】 一 【 新建】 命令 ， 新 建 一 个 动态 的 ASP VBScript 文档 。 设 
置 后 执行 菜单 栏 上 的 【文件 】 一 【 保存】 命令 ， 在 站 点 中 保存 lostpassword.asp 页 面 。 
lostpassword.asp 页 面 是 用 来 让 用 户 提交 要 至 询 遗失 密码 的 用 户 名 的 页 面 。 该 网 页 的 结构 比 
较 简单 ， 设 计 司 的 效果 如 图 4-96 所 示 。 


四 D:\site\user\lostpasswrd. asp 本 |)p,: 











body> <div> [| 100% v614 x 313v 21 kK /3 秒 简体 中 交 (GB2312) 








图 4-96 lostpassword.asp 页 和 而 


(2 ) 在 【文档 窗口 中 选中 表单 对 象 ， 然 后 在 其 对 应 的 【属性 检 杜 器 】 面 板 中 ， 在 【 表 

单 ID 】 文 本 框 中 输入 forml1， 在 【 动作】 文本 框 中 输入 showquestion.asp 作为 该 表单 提交 的 

对 象 页 面 。 在 【方法 】 下 拉 菜 单 中 选择 POST 作为 该 表单 的 提交 方式 ， 如 图 4-97 所 示 。 接 下 
来 将 输入 用 户 名 的 文本 域 命名 为 inputname。 

属性 ,| 


| 到 表单 II 动作 showquestion. 直到 加 目标 位) ww 线 人 C) | 无 a 
form!l 方法 |POST ww 编码 类 型 a 


着 图 4-97 设置 表单 提交 的 动态 属性 


.1 


CO 
(万 
OO 
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( 3) 当 用 户 在 lostpassword.asp 页 面 中 输入 用 户 名 ， 并 单 击 “ 提 交 ”按钮 ， 这 时 会 通过 
表单 将 用 户 名 提交 到 showquestion.asp 页 面 中 ， 该 页 面 的 作用 就 是 根据 用 户 名 从 数据 库 中 找 
到 对 应 的 记录 的 提示 问题 并 显示 在 showquestion.asp 页 面 中 ， 同 时 请 用 户 输 入 问题 的 答案 。 
新 建 一 个 文档 。 设 置 好 网 页 属性 后 ， 输 入 网 页 标题 “查询 问题 "， 执 行 菜单 栏 中 的 【文件 】 
一 【 保存】 命令 ， 将 该 文档 保存 为 showquestion.aspo 

(4) 使 用 Dreamweaver CS6 中 提供 的 制作 静态 网 页 的 工具 ， 完 成 如 图 4-98 所 示 的 静态 


ok 


| 部 分 。 


中 D:\site\user\showauestion. asp* 


百 
A connmser. asp 


r-------------- 











-------------] 


查询 密码 


= 


oP 





~ 


NNNNNNNNNNNNNNNNNN NN NN NN NN 


NMNMMMMNMMO MM VMN NM NN NN 








< 





body> <div> I 凡 | 怨  100% v614 x 360v 24X74 秒 简体 中 文 (5B2312) 








国 图 4-98 showquestion.asp 静态 设计 效果 


(5) 在 【文档 】 窗 口中 选中 表单 对 象 ， 然 后 在 其 对 应 的 【 属性 检查 器 】 面 板 中 ， 在 【 动 
作 】 文 本 框 中 输入 showpassword.asp 作为 该 表单 提交 的 对 象 页 面 。 在 【方法 】 下 拉 菜 单 中 选 
择 POST 作为 该 表单 的 提交 方式 ， 如 图 4-99 所 示 。 接 下 来 将 输入 密码 提示 问题 答案 的 文本 域 
命名 为 inputanswero 





动作 [howpassworassp | 启 有 标 WY| ~| 类 | 无 v 
A 可 





国 图 4-99 设置 表单 提交 的 属性 


( 6 ) 执行 菜单 栏 中 的 【 窗口 】 一 【 绑 定 ] 命令 ， 打开 【 绑 定 】 面 板 ， 单 击 该 面板 上 
“+ ”号 按钮 ， 从 打开 的 菜单 中 选择 【 记录 集 ( 查询 ) 】 命 令 ， 则 会 打开 【 记录 集 】 对 话 框 。 

( 7 ) 在 该 对 话 框 中 进行 如 下 设置 。 

@ 在 【 名称】 文本 框 中 输入 Recordsetl 作为 该 记录 集 的 名 称 。 

@ 从 【连接 】 下 拉 菜 单 中 选择 connuser 数据 源 连接 对 象 。 

@ 从 【表格 】 下拉 菜单 中 ， 选 择 使 用 的 数据 库 表 对 象 为 user。 

@ 在 【 列 】 栏 中 先 选 择 【 选 定 的 】 单 选 按钮 ， 然 后 选中 字段 列表 框 中 的 username 和 


Question 两 个 字段 就 行 了 。 

@ 在 【筛选 】 栏 中 设置 记录 集 过 滤 的 条 件 为 :username: =: 表单 变量 : inputname， 
表示 根据 数据 库 中 username 字段 的 内 容 是 售 和 从 上 一 个 网 页 中 的 表单 中 的 
inputname 表单 对 象 传 了 递 过 来 的 信息 完全 一 致 来 过 滤 记 录 对 象 。 

完成 后 的 设置 如 图 4-100 所 示 。 





: 








: | corrmuser 








: |user 


: 〇 全 部 ”了 @@ 选 定 的 : 


SeX 
Emall 
Quest1 or 
Answer 
Authority 














选 :| username 
表单 变 县 | linputname 























国 图 4-100 定义 记录 和 集 


( 8 ) 设置 完成 后 ， 单 击 该 对 话 框 上 的 【 确定】 按钮 ， 关 闭 该 对 话 框 。 返 回 到 【文档 】 窗口。 

( 9 ) 将 Recordsetl 记录 集中 的 question 字段 绑 定 到 页 面 上 相应 的 位 置 上 。 

( 10 ) 执行 菜单 栏 中 的 【插入 】 一 【表单 】 一 【 隐藏 域 】 命 令 ， 在 表单 中 插入 一 个 表单 
隐 减 域 ， 然 后 将 该 隐 减 域 的 名 称 坝 置 为 username。 

( 11 ) 选中 该 隐藏 域 ， 切 换 到 【 绑 定 】 面 板 ， 将 Recordsetl 记录 集中 的 username 字段 绑 
定 到 该 表单 隐 着 域 中 ， 如 图 4-101 所 示 。 


四 D:\site\user\showuestion. asp* 


-lv 
OD connuser. asp 














body> <div> [RV QQ 100% v614 x 360v 24 /4 秒 简体 中 六 (6B2312) 


4-101 添加 表单 隐藏 域 








虹 六 兼职 指导 : 
当 用 户 输 入 的 用 户 名 不 存在 时 ， 即 记录 集 Recordsetl 为 空 时 ， 就 会 导致 该 页 面 不 能 正常 


显示 ， 这 就 需要 设置 隐藏 区 域 。 





| 
| 
| 
| 


L335 
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(12 ) 在 【文档 】 窗 口中 选中 当 用 户 输 入 用 户 名 存在 时 显示 的 内 容 即 整个 表单 ， 然 后 单 
击 【 服务 器 行为 】 面 板 上 的 “+” 号 按钮 ， 从 打开 的 菜单 中 选择 【 显示 区 域 】 一 【 如果 记录 
集 不 为 空 则 显示 】 命 令 ， 则 会 打开 【 如 果 记 录 集 不 为 空 则 显示 】 对 话 框 ， 在 该 对 话 框 中 选择 
记录 集 对 象 为 Recordset1。 这 样 只 有 当 记 录 集 Recordsetl 不 为 空 时 ， 才 显示 出 来 ， 如 图 4-102 
所 示 。 设 置 完 成 后 ， 单 击 【 确定 】 按钮 ， 关 闭 该 对 话 框 ， 返回 到 【文档 】 窗口 。 


刘 采 记录 集 趟 为 空 则 显示 区 城 


记录 人 车: | 本 和 区 己 守 和 | 





图 4-102 ”打开 的 【如果 记录 集 不 为 空 则 显示 】 对 话 框 


( 13 ) 在 网 页 中 编辑 显示 用 户 名 不 存在 时 的 文本 :“ 对 不 起 ， 您 输入 的 用 户 不 存在 ! 请 单 
击 这 里 重新 输入 "， 并 为 这 些 内 容 设 置 一 个 【如 果 记 录 集 为 空 则 显示 】 隐 藏 区 域 服务 亏 行 
为 ， 这 样 当 记录 集 Recordsetl 为 空 时 ， 显 示 这 些 文本 。 完 成 后 的 网 页 如 图 4-103 所 示 。 


四 nD:\site\user\showauestion. asp = 


五 
QH connuser. asp 





























' 辆 
<body> [R100% vv|6l4x40v 25 /4 秒 | 简体 中 站 (GB2312) 








| 图 4-103 ”设置 隐藏 区 域 


4.6.2 ”完善 查询 功能 


当 用 户 在 showquestion.asp 页 面 中 输入 答案 ， 并 单 击 【 提交 】 按钮 后 ， 服 务 颖 就 会 把 用 
户 名 和 密码 提示 问题 答案 提交 到 showpassword.asp 页 面 中 。showpassword.asp 页 面 就 会 以 用 
户 名 和 密码 提示 问题 答案 作为 参数 ， 然 后 在 数据 库 中 查找 符合 条 件 的 记录 。 如 果 找 到 符合 条 
件 的 记录 ， 则 表明 答案 正确 ， 会 将 密码 显示 在 页 面 中 ， 如 果 找 不 到 符合 条 件 的 记录 ， 则 表明 
答案 不 正确 ， 会 显示 匀 误 信息 ， 并 提醒 用 户 重 新 输入 ， 最 后 进行 测试 。 

( 1) 启动 Dreamweaver CS6， 执 行 菜单 栏 中 的 【文件 】 一 【新建 】 命 令 ， 新 建 一 个 动态 
的 ASP VBScript 文档 ， 命 名 为 showpassword.asp， 设 置 后 执行 菜单 栏 上 的 【文件 】 一 【 保 
存 】 人 命令， 在 站 点 中 保存 这 个 页 面 。 


( 2 ) 使 用 Dreamweaver C56 中 提供 的 制作 静态 网 页 的 工具 ， 完 成 如 图 4-104 所 示 的 静态 











-Jo 
四 D:\site\user\showpasswrd. asp* m1 | 
CM connuser. asp 让 人 | 
入 
查询 系统 
对 不 起 你 输入 的 答案 不 正确 
单 击 这 里 重新 输入 四 
密码 查询 成 功 | 
您 的 用 户 名 是 : | 
您 的 密码 是 : 3 Ge 
污 
-0 
<body> [本 | 到 区 loo% v628 x 377v 23 /4 秒 简体 中 站 (6B2312) | pe 











国 图 4-104 showpassword.asp 静态 设计 效果 


( 3 ) 执行 菜单 栏 中 的 【 窗口 ] 一 【 绑 定 】 命 令 ， 打 开 【 绑 定 】 面 板 ， 单 击 该 面板 上 的 
“+ ”号 按钮 ， 从 打开 的 菜单 中 选择 【 记录 集 ( 查询 )】 命令， 则 会 打开 【 记录 集 】 对 话 框 。 
( 4 ) 在 该 对 话 框 中 进行 如 下 设置 。 


@ 在 [ 名称】 文本 框 中 输入 Recordset1 个 字段 就 行 了 。 
作为 该 记录 集 的 名 称 。 @ 在 【 筛选 】 栏 中 设置 记录 和 集 过 滤 的 
@ 从 【 连接】 下拉 菜 单 中 选择 connuser 条 件 为 : Answer: =: 表单 变量 
数据 源 连 接 对 象 。 inputanswer ， 表示 根 据 数 据 库 和 
@ 从 【表格 】 下 拉 菜 单 中 ， 选 择 使 用 Answer 字段 的 内 容 是 否 和 从 上 一 个 
的 数据 库 表 对 象 为 user。 网 页 中 的 表单 中 的 inputanswer 表单 
@ 在 【 列 】 栏 中 先 选 择 【 选 定 的 】 单 对 象 传递 过 来 的 信息 完全 一 致 来 过 
选 按钮 ， 然 后 选中 字段 列表 框 中 的 滤 记 录 对 象 。 


username 和 Question 和 Answer 三 


完成 的 设置 情况 如 图 4-105 所 示 。 
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国 图 4-105 定义 记录 集 
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四 D:\site\user\showpassword. asp* 


1 
口 
其 








( 5 ) 设置 完成 后 ， 单 击 【 确定 】 
按钮 ， 关 闭 该 对 话 框 ， 返 回 到 【 文 
档 】 窗 口 。 

( 6 ) 将 记录 集中 的 username 和 
password 两 个 字段 分 别 添加 到 网 页 
中 ， 如 图 4-106 所 示 。 

(7) 同 样 需要 根据 记录 集 
Recordset1l 是 否 为 空 ， 为 该 网 页 中 
的 内 容 设 置 隐 沽 区 工 的 服务 囊 行 
为 。 在 【文档 】 窗 口中 选中 当 用 户 
输入 密码 提示 问题 答案 正确 时 显示 








<body> 


二 
IR connuser. as 






P 


查 向 系统 
对 不 起 你 输入 的 答案 不 正确 
单 击 这 里 重新 输入 
密码 查询 成 功 
您 的 用 户 名 是 : {Recordsetl. username} 


您 的 密码 是 : {Recordsetl. password} 


v 


[Ny Cy 10o0% v626 x 423v 24 /4 秒 | 简体 中 六 (GB2312)| 





的 内 容 ， 然 后 单 击 【 服务 器 行为 】 
面板 上 的 “+” 号 按钮 ， 从 打开 的 菜 
单 中 选择 【 显示 区 域 】 一 【 如 果 记 录 集 不 为 空 则 


中 D:\siteMser\showpasswrd. asp 


瑟 了 
CH connuser. asp 














您 的 用 户 名 是 : {Recordsetl. username} 


您 的 密码 是 : {Recordsetl. password} 





v 
v628 x 423v 25 下 /4 秒 简体 中 交 (6B2312) 
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| 图 4-107 ”完成 后 的 网 页 效 采 


4.6.3 ”密码 查询 测试 

将 相关 的 网 页 保存 并 上 传 到 远程 站 点 ， 就 可 
以 测试 该 资料 修改 的 执行 情况 了 。 

(1) 打开 IE 浏览 器 ， 在 地 址 栏 中 输入 


http:// 127.0.0.1/user/default.asp, #J 开 default. 


asp 文件 。 单 击 该 页 面 中 的 “ 取 回 密码 ”链接 文 
本 ， 切 换 到 如 图 4-108 所 示 的 页 面 。 

( 2 ) 当 用 户 进入 密码 查询 页 惫 lostpassword. 
asp 后 ， 输 入 并 向 服务 局 提交 自己 注册 的 用 户 名 
信息 。 当 输入 不 存在 的 用 户 名 ， 并 单 击 【 提交 】 





国 图 4-106 加 入 的 记录 集 效果 
显示 ] 命令 ， 打开 【 如 果 记 录 集 不 为 空 则 显 

示 】 对 话 框 ， 在 该 对 话 框 中 选择 记录 和 集 
对 象 为 Recordset1。 这 样 只 有 当 记 录 集 
Recordset1 不 为 空 时 ， 才 显示 出 来 。 设 
置 完 成 后 ， 单 击 【 确定 】 按 钮 ， 关 闭 该 
对 话 框 ， 返 回 到 【文档 】 窗 口 。 

( 8 ) 在 网 页 中 选择 当 用 户 输入 密码 提 
示 问 题 答 案 不 正确 时 显示 的 内 容 ， 并 为 这 
些 内 容 设置 一 个 【如 果 记 录 集 为 空 则 显 
示 】 隐 茂 区 域 服 务 器 行为 ， 这 样 当 记录 集 
Recordsetl 为 空 时 ， 显 示 这 些 文本 。 

( 9 ) 完成 后 的 网 页 如 图 4-107 所 
示 。 执 行 菜单 栏 中 的 【文件 】 一 【保存 】 
命令 ， 将 该 文档 保存 到 本 地 站 点 中 。 


动 亚 南 家 三 一 Risrosoft Internot Hiploaror 
交 师 在 1 栖 导 蛋 ) 要 看 人 前 村 肥 工具 癌 ) 师 是 各 


Os © EO Pm wens Ou 加 | 合 - 


a! 腊 ] bits 让. 而, 六. Pasar7 了 而 本 证 和 四 大 本 十 本， 直下 





量 图 4-108 ”进入 要 查询 密码 的 页 面 


按钮 ， 则 会 切换 到 showquestion.asp 页 面 ， 该 页 面 将 显示 用 户 名 不 存在 的 销 误 信 息 ， 并 提供 
一 个 切换 到 lostpassword.asp 页 面 的 链接 对 象 ， 让 用 户 切 换 到 lostpassword.asp 页 面 ， 并 重 


EE | 查询 问题 = croso ft Internet Explorer 
; 文件 到 ) ”编辑 区 ) 查看 WW) 收藏 和 工具 位) 帮助 EA 


@am- 日 国 加 的 /时 交 x On @ 全 - 怠 


SEa 
人 


; 地 址 器 ) | 件 http://127.0.0. 1/user/ showquestion. asp 


取 回 密码 提示 问题 : 我 的 职业 是 什么 ? 
输入 正确 的 答案 : 董事 本 | | 


CJ] CE 








4-109 ”showquestion.asp 网 页 


(5 ) 如 果 在 showquestion.asp 网 页 中 输 
入 正确 的 答案 ， 并 单 击 【 提交 】 按 钮 后 ， 浏 
览 强 就 会 切换 到 showpassword.asp 页 面 ， 并 
显示 出 该 用 户 的 密码 ， 如 图 4-110 所 示 。 

( 6 ) 上 述 测 试 结果 表明 ， 密 码 查 询 系 统 
已 经 成 功 制作 。 

到 这 里 ， 会 员 管理 系统 的 主要 音 用 功能 
都 已 经 设计 完成 并 测试 成 功 ， 用 户 如 果 需 要 
将 其 应 用 到 企业 网 站 上 上 ， 只 需 与 设计 的 页 面 
配合 ， 修 改 一 些 相 关 的 文字 说明 及 育 景 交 
果 ， 就 可 以 完成 企业 网 站 会 员 管 理 系 统 的 
制作 。 


新 输入 用 户 名 。 

(3 ) 如 果 输 入 一 个 数据 库 中 已 经 存在 的 
用 户 名 ， 然 后 单 击 【 提交】 按钮 。IE 浏览 器 
会 自动 切换 到 showquestion.asp 页 面 ， 如 图 
4-109 所 示 。 下 向 就 在 showquestion.asp 输 
入 密码 提示 问题 演 案 ， 疯 试 showquestion. 
asp 网 页 的 执行 情况 。 

(4 站 这 里 可 以 元 竹 六 一 个 条 必 的 各 
案 ， 检 查 showpassword.asp 中 是 否 能 够 显示 
密码 提示 问题 不 正确 时 的 错误 信息 。 


并 | 显示 密码 - icroso fit Internet Explorer 
; 文件 到 ) 编辑 EF) 查看 名 ”收藏 入 工具 (TI) 和 才 助 00 和 


站 国 甸 万 生 丙 wx 寺内 加 内- 学 


SE:#y 


@an-© 


; 地 址 也 ) 隔 http://127.0.0. 1/user/showpassword. asp 


查询 系统 
密码 查询 成 功 
您 的 用 户 名 是 : 小 王 


您 的 密码 是 : 123456 


单 击 这 里 重新 登录 








图 4-110 showpassword.asp 页 面 
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对 于 一 个 网 站 而 言 ， 具 有 交互 功能 是 非常 有 必要 
的 ， 一 艇 客户 营 本 上 会 要 求 制作 留言 板 这 一 项 功能 BE 
通过 留言 板 系 统 能 让 网 站 的 浏览 者 留 下 意见 或 者 是 
求 信息 ， 这 对 于 网 站 拥有 者 来 说 也 是 关键 的 功能 部 
分 。 通 过 留言 板 可 以 采集 浏览 者 的 意见 并 不 断 完善 网 
站 的 更 新 ， 让 制作 的 网 站 更 适合 浏 贞 者 的 需求 。 本 章 
通过 对 伊 婷美 业 的 在 线 留言 功能 的 实现 ， 来 声明 该 类 
网 站 的 规划 建设 。 兼 职 的 设计 师 通 过 本 章 主 要 掌握 留 
言 板 系统 的 开发 方法 。 





5.1 网 站 整体 设计 


伊 婷 美 业 的 企业 网 站 是 一 个 在 线 加 盟 型 的 美容 美体 型 网 站 ， 由 于 它 所 向 对 的 消费 群体 全 
是 女性 ， 所 以 在 网 站 建设 的 整体 风格 上 蝎 突 出 美丽 的 特 氮 。 在 设计 的 时 候 ， 不 论 是 从 形象 代 
言 人 还 是 网 站 色调 上 的 选择 ， 都 是 从 女人 爱美的 天 性 出 发 若 虑 。 在 登录 的 首页 上 ， 用 Flash 
制作 了 一 组 以 形象 代言 人 为 主 的 动画 ， 用 鲜 化 点 缀 ， 效 果 如 图 5-1 所 示 。 


避 . - 全 时 项 业 - - gE Lrker Raplir er 
朗 隆 里) 证 贺电 查看 眉 ) 中 大 名 ) 工 内 部 ) 二 胸 二 
hii EE Luals din 


p "0 古书 | 让 且 
0 ee Sa 


bi. 


| 中 交加 站 3 





图 5-1 网 站 首页 Flash 动画 效果 


5.1.1 网 站 功能 结构 分 析 


伊 婷美 业 网 站 主要 用 来 发 布 一 些 信息 ， 告 诉 浏 览 者 有 关 加 盟 的 一 些 情况 。 浏 览 者 可 以 通 
过 留言 板 提 问 ， 仇 婷美 业 网 站 管理 者 授 过 留言 板 回复 问题 。 所 以 在 网 站 的 功能 上 主要 由 静态 
的 信息 页 组 成 ， 需 要 搭建 如 下 的 几 个 导航 菜单 。 

@ 首页 

@ 公司 简介 
企业 文化 
品牌 优势 
技术 优势 
加 盟 支 持 
贸 利 计划 

学 留言 板 

@ 联系 我 们 

在 上 向 的 9 个 页 面 当 中 ， 公 司 简介 观 入 一 个 简单 的 新 闻 发 布 功能 ， 留 言 板 是 本 章 重 点 要 
介绍 的 功能 系统 部 分 ， 其 他 的 页 面 都 是 由 静态 的 文字 及 图 片 组 成 。 
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5.1.2 页 面 设计 规划 


从 上 面 的 导航 菜单 出 发 ， 在 本 地 站 扣 上 建立 六 所 文件 来 Site。 制 作 后 的 网 站 建立 的 二 级 
文件 夹 及 文件 如 图 5-2 所 示 。 


加 加 加 
各 


文件 @) ”编辑 E) 查看 WW 收藏 和 工具 (7) 帮助 0 
@AER - 目 - 和 让 也 机 素 也 文人 夹 | 回 - 
地 址 0) | 坑 D:\site v 国 革 到 


立 件 和 文件 夹 妊 黎 直 已 Conmmections > images 
| 轩 创 哇 一 个 新 交 件 到 
| 仿 将 这 个 文件 夹 发 布 到 蜗 区 

Web testsite 


名 共享 此 文件 夹 
het 所 让 | ASp | 这 3 asp EHD» 和 asp 
《ji 11 大 《> > em < 


二 新 加 管 0:) EHD culture. asp fail.h EE» ee asp 
此 我 的 文档 《DD ASP 文件 OL Da < | 文件 
塘 共享 文档 -2 
| 我 的 电脑 EE member. i EE plant. ED EH» skill. ES 
ASP 评 { Pe ASP 了 Y 
饮 同上 邻居 《1 9 《</> 4 性 2 CAE > 




















15 个 对 象 轴 1 个 隐 疗 对 象 ) 


国 图 5-2 站 扣 规 划 文件 





该 网 站 站 所 下 的 8 个 asp 页 面 就 是 整个 网 站 主要 栏目 的 静态 页 面 。 在 Dreamweaver CS6 
中 经 过 排版 设计 就 可 以 实现 。 下 面 分 别 介绍 一 下 各 页 面 的 功能 。 

(1 ) index.asp 页 面 是 这 个 网 站 的 首页 ， 输 入 网 站 的 域名 后 首先 打开 的 就 是 该 网 页 ， 如 
5-3 所 示 。 在 前 面 介 绍 过 该 网 页 是 由 一 个 Flash 动画 组 成 ， 除 了 一 段 动画 之 外 ， 在 页 面 上 
有 6 个 按钮 ， 通 过 单 击 这 些 按钮 能 够 进入 二 级 页 面 浏览 其 他 栏目 的 信息 。 


> . . 伊 控 美 业 , Ncrosoft Jntornot Explorer 
文件 位) ” 广 辑 个 ) 要 看 信 ) 收藏 人 工具 人 7) 帮助 吕 


3 D - 国 国 娄 | 万 失 索 支 收 藉 表 二 | 各 "总 加 不 他 全 


地 址 四) | 四 hetp ;1/127.0.0 47 一 钢 八 江 





| | J Ej 于 捧 有 济公 司 
| BI, Fr 
pal ne 1 .ch Co. ET 


@ tru 





于 图 5-3 首页 的 Flash 动画 设计 效果 
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(2 ) about.asp 页 和 面 是 关于 我 们 栏目 页 和 面 ， 如 图 5-4 所 示 。 该 网 站 的 Banner 和 导航 条 都 
是 用 Flash 开发 制作 的 独立 文件 ， 放 置 在 images 文件 下 ， 这 样 做 的 目的 一 是 为 了 保证 整体 页 
加 的 美观 ， 二 是 为 了 方便 修改 。 该 页 面 加 入 新 闻 发 布 动态 扩 术 ， 非 党 简单 ， 在 这 里 不 做 具体 
的 介 


文 作 号 ) 编 畏 全 ) 查看 路 麻 忆 ) 工具 0) 帮助 名 
境 芷 三 逢 hy ive ytbewoty con/aboot wip 


业 科 技 开 发 有 限 公司 
四 际 美容 美体 连锁 机 构 








公司 简介 全 业 文 做 Rettis 续 和 优 反 加 租 交 持 时 得 + 刘 


NEWS Nane ji- 
口 执 襄 北京 马 咎 连 全 上 店 开业 大 吉 yw 
口 热烈 执 提 贫 州 省 黔 西 店 转生 开业 "= 
口 热烈 执 贺 广西 南宁 二 团 将 开 生 ew 
口 热烈 要 所 北京 举 文 门 连 腑 店 即 持 并 业 ,= 
口 热 妨 起 轿 江 苏 苏州 店 开 业 "ee* 
口 执 罚 执 提 尖 北 十 拱 店 开业 "。* 
口 热 疗 执 揽 山西 太原 店 开 业 re 
口 热烈 势 复 江 荔 丹阳 店 开 业 re 
口 上 海光 大 会 展 中 心 3 月 8 日 情 主 稳 司 连 独 展会 等 特 侣 的 浊 临 ev 








和 图 5-4 关于 我 们 的 栏目 设计 效果 


( 3 ) advance.asp 页 面 是 品牌 优势 的 栏目 页 惫 ， 效 果 如 图 5-5 所 示 。 访 页面 除了 姐 入 的 
Flash 动画 Banner 和 导航 条 之 外 ， i 


动 .如 晤 转生 ,， Grorofit Letorrat Heploror 
这 件 凋 ) 篇 必 证) 耐量 地 路基 由 工具 条 帮助 御 


名 直 骨 1 | bil: Lr. yh, er rir i 


1 0 ea (= 
Ea 三 


必 司 阐 介 。。 宇 业 文化 。。 剧 泪 庆 轩 。 。 读 习 答 。 。 加 盟友 竺 。。 田 利 it 刘 


10 平 票 鞋 ， 10 年 省 煌 ! 放眼 世界 ,做 大 启 家! 


“如 器 站 业 " Pe ee 诚 悄 既 吉 示范 单 眶 "车 导 ,与 下 当 茹 。 浓 这 最 等 国际 如。 
逢 咒 阴 。 政界 - 丽 筷 四 的 名 上 曲名 击 毫 ， 量 刀 颇 区 介 师 二 本 的 丁 . 
4 的 类 = 妇 全 克 为 条 害 的 重 丰 。 中 生 以 名 点 拓 证 对 月 已 的 守 坟 。 


CCVT 强势 媒体 投放 ， 虹 造 品 牌 忆 势 ! 


全 国平 面 出 体 : 
* 畏 品 赎 牧 甘南 }》 《于吉 青年 同和 ET . 
信和 和 人 ， > 


量 Iriernat 











加 图 5-5 品牌 优势 栏目 设计 效果 


(4) contact.asp 页 面 是 联系 我 们 栏目 页 面 ， 设 计 的 效果 如 图 5-6 所 示 。 在 该 页 面 的 设 
计 过 程 中 ， 主 要 由 网 站 制 eA 正常 情况 下 是 企业 的 联系 办 
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法 、 办 公 地 址 等 ， 有 些 企业 还 会 放 入 一 些 方位 图 等 。 


0 


| I 0 | A Es 同 回 回 
文件 下 芒 司 让 ”查看 名 收 芝 册 工具 在) 村 肿 邮 


霹 址 而; 看 Pip /sen. Ftb ety, eum oon, Esp 








宇 业 让 化 。 。 品牌 攻 态 。 。 持 十 诉 由 加 禹 支持 是 利 计划 望 言 梳 。 。 谨 系 息 站 


OONTAOT © 北京 刁 姥 美 业 科技 开发 有 限 公 司 
联系 管 询 
地 址 ; 北京 币 翻 刚 区 劲 粹 航 兴 香 宇 时 1 号 科 3 单元 1203 宣 
嘲 合 : 0L0-87T796220/30/50/60 
导 识 : 0UD=W7TS62: 贡 ) 
hlp: /leve. Flbewaly. com 


笛子 信和 藉 2 pitlineseiyebldh. eam 





志 Tntarnat 


看 图 5-6 联系 我 们 栏目 的 设计 效果 


置 企业 的 发 展 历史 、 经 营口 号 等 信息 ，) WE 


名 . .如 斥 亲 业 .. = icrosoft Internet Eeplorer 
文件 家) 访 恒 自 ) 查看 加 收藏 太 工具 并 ) 秋 肋 遇 ) 
地 幅 心 ) 地 | http i Ftbatity, im Flinre Ei 
“北京 伊 婷美 业 科技 开发 有 限 公 
-全 伊 婷美 业 国 际 美 容 美 体 连锁 机 村 





ER 2 vO`”〈 


| | 首页 公司 篇 他 全 由 六 化 如 要 支持 明和 计划 留言 板 联系 我 们 


| 、 本 | 宇 业 这 器 : 医 括 美丽 ， 共 创 财 窗 。 捷 同 成 长 : 鹿 法 充 典 。 
ali . : 琶 昔 怕人 匀 : 己 人 尖 本 。 红 位 蚂 旨 .科技 创新 .引导 时 山 。 
| . 行为 只 刚 : 精诚 团 由 。 直 让 最 荔 。 高 效 运 什 。 充 兽 自 季 。 

| ; 型 全 业 精 冲 : 具 无 我 有 。 具 用 匠 至 。 勇 于 进取 。 邦 转世 界 。 


仍 妨 企业 女性 误 源 


一 . 盐 的 世界 

但 和 葬 开 生生 

讲 上 寺 组 有 有 需 ， 是 具 装 间 这 的 要 ! 

雪 静 不 避 避 在 创 迁 自 , 而 且 是 用 美 来 心 关爱 1 


-利和 丰 和 蒜 上 管 理 习 页 的 一 名 适 . 





志 Iatsrnat 


国 图 5-7 企业 文化 栏目 设计 效果 


(5) culture.asp 页 面 是 企业 文化 栏目 页 面 ， 效 果 如 图 5-7 所 示 。 企 业 文化 页 向 主要 放 


( 6) member.asp 页 面 是 加 盟 支 持 栏 目的 页 面 ， 效 果 如 图 5-8 所 示 。 该 页 面 主要 把 企 
” ”的 加 盟 信 息 按 条 理 罗 列 清楚 邑 可 ， 在 美工 排版 De RT eg 
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局 . . 贡 娃 美 业 .- . - 到 icrosoft Internet Explorer 


: 文件 严 ) 编辑 仁 ) 查看 如 ”收藏 全) 工具 民 I) 帮助 山 ) 
; 地 址 0) 


辐 加 加 
名 








鲁 ] http:yywww.ytbeauty. com/member. asp 








, 龙 京 仇 婷 关 业 科技 开发 有 限 公 司 
关 婷 美 业 左 


About 


utUs Culture Advance Knowled Member Plant 
公司 简介 企业 文化 品牌 忧 势 技术 忧 热 加 盟 支 持 显 利 计划 


局 动 闪电 致 富 的 齿轮 





政策 支持 形象 支持 


人 ;授予 盆 婷 美 业 和 连锁 加 盟 证 书 。 


;形象 店 每 开设 一 家 分 店 ,总 部 奖励 3 一 6 万 元 > 授予 伊 婷美 业 连 锁 加 盟 牌 区 。 
; 首 家 形象 店 除 以 上 政策 支持 外 ， 总 部 还 给 予 指派 总 部 直 营 店 经 营 ;授权 使 用 伊 婷 美 业 连 锁 加 盟 商 标 、 商 号 。 
. 最 好 的 经 理 ， 下 店 亲 自 经 营 的 特殊 忧 惠 条 件 ， 汶 形象 店 保驾 护航 ， 实 现 ;总 部 派 市 场 部 作 员 针对 加 盟 商 区 域 调 研 评估 ， 并 为 加 盟 商 选择 适 
， 轻松 赚钱 ,无 风险 , 无 顾虑 的 愿望 4 合 的 店 址 。 


经 营 与 指导 


> 总 部 提前 20 天 制订 开业 计划 。 
;总 部 在 开业 前 3 天 可 派 经 营 金牌 美 导 ， 驻 店 指导 经 营 。 :提供 加 盟 商 3 一 5 人 来 京 火车 票 及 食 宿 
总 部 第 划 部 短 有 是 Hn 盟 商 全 程 第 蔬 . 六 想 屁 逢 tl 盾 行 方 宏 . 色相 机 .加盟 商 本州 沂 十 作 人 局 来 总 部 报 之 刍 品 学 本 ,以 放 会 枕 后 师 必 此 


入 Internet 


培训 支持 





国 图 5-8 加盟 支 持 栏 目 设 计 效 果 
(7 ) plant.asp 是 鳃 利 计划 栏目 页 面 ， 效 果 如 图 5-9 所 示 。 


ES . . 骨 巡 美 业 . .二 CrOosOfL ImEETmEeL EXzD1IOrEeT 
文件 色 ) 编辑 代 ) 查看 名 ”收藏 入 工具 CY 帮助 加 


:有 - 日 因 国 向 这 次 Vi 二 斑 因 四 - 属 回 -回合 浊 


; : 地 址 0) el http:i/ /www. ytbeauty. com/plant. asp 


辐 回回 








站 国 守 a 





ci 全 所 北京 伊 婷 美 业 科技 开发 有 限 公 


es 伊 婷 美 业 国际 美容 美体 连锁 机 


Advance Knowled Member "ant BBS Contact 
品牌 蕊 热 技术 其 执 加 盟 支 持 胜利 计划 留言 板 联系 我 们 


盈利 计划 





首 家 无 风险 投入 7 大 优势 : 
首 家 加 盟 店 可 无 风险 成 为 总 部 直 营 店 , 享受 总 部 忧 囊 并 拥有 当地 加 盟 店 的 广 洁 发 布 权 。 
30 多 项 政策 支持 ， 让 您 少 走 10 年 探索 之 路 ， 轻 检查 断 当 地 美容 市 场 。 
全 程 教授 “ 伊 婷 美 业 无 忧 管理 体系 ”课程 。 
总 部 派 人 员 进 行 全 面 的 市 场 调查 及 可 行 性 分 析 。 
总 部 派 金牌 美容 院 经 理 进行 1 一 3 个 月 的 经 营 管理 。 








多 Internet 


国 图 5-9 刍 利 计划 栏目 设计 效果 


(8 ) skill.asp 是 技术 优势 栏目 页 面 ， 该 页 面 设计 的 效果 如 图 5-10 所 示 。 设 计 的 时 候 也 
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(50 


主要 是 文字 的 排版 ， 注 意 与 其 他 页 血 的 统一 性 。 


ES 一 Croso ft Internet Explorer 辐 回 因 
: 文件 补 ) 编辑 伟 ) 查看 局 ) 收藏 这) 工具 民 I) 帮助 出 ) 


图 银 :. 周 -因由 全 万 撤 南 炉 天 鲜红 休 


; 地 址 吧 ) 名 | http: www.ytbeauty. ceomy skill. asp 


VA 


外 | 加- 二 加 











图 EE 








风 呈 得 区 这 过 9 


J 贷 过 过 hr A 


| 页 公司 简介 企业 六 化 。 。 品牌 基 势 。 。 技术 忧 势 。 。 加 盟 支 持 。 盈利 计划 
| 风靡 欧美 的 冷光 技术 ，3| 领 美容 时 尚 ! 
.| 守 妊 娠 绞 、 疤 病 取 得 重大 突破 
伊 六 美 业 与 美国 SDGL 生物 实验 室 兴 成 技术 联 明 ,经 过 长 期 严谨 的 科学 研究 和 实践 ,一 种 被 称 为 coolbean 的 冷光 能 有 效 去 除 
.和 妊娠 纹 技 术 证 生 了 。“ 冷 光 社 妊 兰 绞 技 术 ” 获 得 国家 专利 。 填 补 了 国内 行业 空白 ， 为 千 千 万 万 时 尚 女 性 重新 找 加 了 自信 和 美 面 。 该 技 
.和 才能 用 光 的 能 量 来 冷 化 受 损 的 细胞 组 织 。 从 而 让 新 的 皮肤 细胞 取而代之 ， 色 素 和 胶原 质 的 产生 的 加 快 可 以 让 皮肤 快速 得 到 恢复 
| | 通常 来 说 ,细小 的 妊娠 匀 ， 


一 次 就 可 消失 ， 重 新 拾 回 少 女 时 平坦 的 腺 部 ， 细 局 幼 嫩 的 胸部 ， 让 损害 美 画 的 妊 妊 众 悄然 走 开 。 


. 伊 楚 美 业 中 外 专家 ， 专 业 针 对 东方 女性 的 皮肤 性 质 、 特 点 ， 历 经 10 年 顿 必 幸 献 ， 可 全 效 祛 除 妊娠 镶 、 节 绞 、 肥 胖 列 绞 、 疤 . 
| .1 痕 、 囊 胺 产 疤 妆 ， 泥 伤 印 , 各 种 手术 鱼 下 的 四 凸 疤痕 ， 及 增生 性 疤痕 令 您 的 肌肤 晶莹 别 透 ， 洞 六 白 督 、 








入 Internet 


上 加 图 5-10 技术 优势 栏目 设计 效果 
| 


本 小 三 的 页 面 基本 上 是 序 态 页 面 ， 拉 术 非 党 地 简单 。 但 由 于 做 了 整体 的 规划 
个 网 站 的 设计 风格 ， 让 这 个 网 站 看 起 来 非常 亮丽 吸引 人 。 


5.2 网 站 效 据 库 设计 


从 本 节 开 始 就 要 制作 这 个 网 站 的 核心 
连接 、 制 作 显示 当前 所 有 的 留言 列表 的 网 页 、 策 
二 示 某 个 留言 详细 内 容 的 网 页 、 制 作 让 用 户 进行 


加 5.2.1 留言 板 数据 库 
留言 板 的 制作 需要 设计 存储 发 言 用 户 资料 的 数据 库 文件 和 用 于 后 台 登 录 管理 留言 板 的 用 
户 信息 数据 库 文件 。 要 在 数据 库 中 保存 用 户 的 留言 信息 ， 主 要 设计 如 下 一 些 内 容 ， 留 言 人 妈 


名 、 留 言 时 间 、 留 言 人 的 联系 地 址 ( 通常 是 Email 地 址 )、 留 言 主题 和 留言 内 容 。 要 在 数据 


库 中 另 创建 一 个 数据 表 用 于 后 合 登录 管理 使 用 ， 主 要 有 用 户 名 和 密码 即 可 。 
me 的 设计 步骤 如 下 。 


) 首先 要 设计 数据 库 的 字段 标准 ， 可 以 在 数据 库 中 采用 如 表 5-1 所 示 的 字段 。 这 里 假 
设 用 ee 称 是 Message。 


， 保 证 了 整 








留言 板 ， 主 要 包括 设 定 系 统 DSN、 创 建 数据 库 
| 作 让 浏览 者 添加 自己 留言 的 网 页 、 制 作 并 显 
留言 管理 的 网 页 。 
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表 5-1 ”Message 数据 的 字段 设计 


项 目 必 填 字 段 | ”多 许 空 字符 惠 索引 
om |p me lg | | am 
RNAAS [am | zk | | | 4 
HR we | | | | 

rn TE EE CE 8 

ET 

FN mm | 4 
也 i 


用 于 存储 后 从 管理 用 户 的 数据 表 名 称 是 Admin。 可 以 在 数据 库 中 采用 如 表 5-2 所 示 的 
字段 。 
表 5-2 Admin 数据 的 字段 设计 


后 
后 





3 兼职 指导 

Admin 数据 字段 名 称 用 户 名 及 密码 是 可 以 任意 修改 的 ， 和 网 站 建设 初期 ， 可 以 将 其 设置 
为 初始 值 均 为 Admin， 这 样 易于 测试 操作 ， 在 上 传 到 服务 器 进行 使 用 时 ， 请 把 用 户 名 和 密码 
设置 成 自己 的 用 户 名 和 密码 . 


(2 ) 接 下 来 在 Microsoft Access 中 实现 数据 库 的 搭建 。 首 先 运行 Microsoft Access 程 
， 单 击 【 新 建 空白 数据 库 选项， 如 图 5-11 所 示 。 








SF Nicrosoft Office Access 


_ 新建 全 下 政 吉 


由 同 


是 包 理 枚 民权 





5-11 ”新 建 Access 数据 库 
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bo 

















二 | 
匀 最 可 高 。。 要 记 志 了 时 | EE 
习 on Lt = 村 3 EE 
) 接 下 来 创建 表 的 bl = 和 
创 EC 
本 【 创建 】 按 钮 5 
在 Access 中 建立 一 个 空 | | 
的 文件 message.mdb， 如 
b=1]2 所 不 O 
加 由， 各 1 区 1 用 | * HH | 亲王 FS 沁 | 融 素 





国 图 5-12 建立 的 数据 库 


) 用 鼠标 石 键 单 击 表 1: 
选择 【 设 
计 视 图 】 命 令 ， 打 开 【 另存 为 】 对 
十 框 ， 保 和 存 表 的 名 称 为 message， 
大 图 5-13 保存 表 message 如 图 5-13 所 示 。 


5 ) 单 击 【 确定 】 按 钮 ， 按 表 5-1 输入 字段 名 并 设置 其 属性 ， 完 成 后 如 图 5-14 所 示 。 


表 名 称 咎 ): 


由 所 三 三 冯 总 握 


确定 职 消 











| : 茹 问 沉 和 剧 应 全 用 产后 担 笃 郑 生 这 他 积 中 佬 的 种 
| : 芝 。 按 fl1 迟 可 查 属 有 关 数 过 美 型 的 帮助， 








国 图 5-14 创建 表 的 字段 


洲 之 兼职 指导 : 

其 中 ，DateTime 字段 中 应 该 保存 留言 被 存 入 数据 库 时 的 时 间 ， 可 以 在 Access 中 ， 将 其 
默认 值 设 置 为 “=Now()”， 如 图 5-14 所 示 。 这 样 每 当 记 录 被 保存 时 ， 都 会 自动 计算 出 正确 的 
时 间 。 


( 6) 同步 又 (3) ~ (5)， 创 建 数据 表 Admin， 创 建 的 数据 表 如 图 5-15 所 示 。 
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anmin + Fawwwerd 7 识 六 首 芝 遍 > | 
admin admin | 
【新建 ， 


记录 : HH 4 第 1 项 届 工 栅 是 NE 





图 5-15 创建 Admin 数据 表 


) 编辑 完成 数据 库 i et 
) 在 数据 库 编 辑 完 ， 必 须 建立 能 够 在 Dreamweaver C56 中 使 用 的 数据 源 连接 对 象 ， “” 国 
de | 
(9) 从 Windows 的 控制 面板 的 管理 工具 中 打开 【 0DBC 数据 产 管 理 器 ])， 单 击 【 系统 
DSN 】 选 项 卡 ， 添 加 一 个 刚才 建立 的 message.mdb 数据 库 文件 ， 新 建立 一 个 名 为 dsnmessage 
的 系统 DSN， 如 图 5-16 所 示 。 
ODBC 数据 源 管 理 坷 


用 户 DSW 系统 DSH | 文件 DSH | 驱动 程序 | 跟踪 ”| 连接 池 | 关于 | 
系统 数据 源 (8): 





0DBC 系统 数据 源 存 情 了 如 何 与 指定 数据 提供 程序 连接 的 信息 。 系 
统 数 据 源 对 当前 机 器 上 的 所 有 用 户 可 见 ,包括 讽 服务 。 





5-16 ”建立 系统 DSN 


) 在 Dreamweaver CS6【 文档 窗口 中 建立 留言 板 的 任意 动态 页 面 ， 可 以 通过 9 执行 羔 
本 【 窗口 】 一 【 数据库 】 命 令 ， 打 开 en 对 话 框 ， 单 击 该 对 话 杠 中 的 “+ 
按钮 ， 从 弹出 的 下 拉 菜 单 中 选择 【 数据 源 名 称 ( DSN )】 命 令 ， 打开 【 数据 源 名 称 二 
话 框 ， 通 过 该 对 话 框 为 当前 站 点 建立 一 个 数据 源 连 接 。 在 【 连接 名 称 】 文 本 框 中 输入 数据 源 
连接 的 名 称 为 coonmessage， 单 击 【 数据 源 名 称 (DSN) 】 文 本 框 右边 的 三 角 按 钮 总 ， 从 打开 的 
下 拉 菜 单 中 选择 刚才 创建 的 dsnmessage 系统 数据 源 ， 其 他 的 保持 默认 值 ， 如 图 5-17 所 示 。 


数据 淹 名 称 (DS5HN) 


连接 名 称 : |coonmessage 
数据 源 名 称 年 3H) : | dsnmessage 




















Dreamweaver 应 连接 : 〇 使 用 测试 服务 器 上 的 DSH 
@) 使 用 本 地 DSH 





| 图 5-17 ”建立 数据 库 连 接 
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(11 ) 单 击 【 确定 】 按 钮 ， 完 成 数据 库 连 接 。 
5.2.2 ”留言 板 页 面 设计 


接 下 来 对 用 户 登录 留言 板 系 统 所 需要 的 页 徊 结构 做 一 个 大 体 的 规划 。 要 利用 页 面 完 成 留 
言 板 的 功能 ， 需 要 一 个 页 面 来 为 用 户 提 供 进 入 留言 板 的 入 口 ， 通 弟 包 合 指 辣 发 言 页 面 的 链接 
和 指向 伍 看 留言 的 链接 ， 还 需要 一 个 页 面 来 人 多 许 用 户 输入 和 递交 留言 ， 最 后 ， 还 要 设计 一 个 


' 页 面 来 显示 留言 。 所 以 ， 该 用 户 登 录 系 统 主要 由 以 下 的 一 些 动态 网 页 构成 。 


© EnterMessage.htm 提供 进入 到 留言 板 的 主页 
@ InsertMessage.asp 用 户 发 言 的 页 面 

@ ListMessage.asp 主题 列表 页 面 

®© ShowMessage.asp 显示 留言 内 容 的 页 面 

@ Admin.asp 用 于 登录 后 合 管理 的 页 面 
@ DeleteMessage.asp 选择 删除 多 余 留 言 的 页 面 
@ Deleteok.asp 误 除 多 余 留 言 的 页 面 

@ mi.asp 修改 密码 的 页 面 


所 有 的 留言 板 数据 及 页 面 都 可 以 应 用 此 方法 来 设计 ， 同 时 也 可 以 应 用 于 其 他 功能 模块 的 
数据 库 撞 建 和 页 面 设计 。 


5.3 设计 登录 页 面 


首先 制作 留言 板 登录 系统 的 首页 即 EnterMessage.htm 页 面 ， 该 页 面 是 这 个 登录 系统 的 首 
页 ， 也 是 用 于 输入 登录 信息 的 页 面 。 一 般 来 说 ， 用 户 发 言 的 页 面 与 留言 显示 的 页 向 应 该 分 别 
是 不 同 的 两 个 页 面 。 因 此 ， 当 用 户 希 望 进入 留言 板 时 ， 应 该 提供 两 个 选项 ， 人 允许 选择 是 进行 
发 言 ， 还 是 僵 看 现 有 和 留言。 为 了 方便 企业 对 留言 板 的 管理 ， 还 需要 制作 一 个 企业 用 来 登录 后 
合 进行 留言 管理 的 入 口 。 

制作 的 步骤 如 下 。 


回回 固 
针 


净 件 全 ) 编辑 人 让) 查看 如 ”收藏 此 ) 工具 XY 和 玫 助 人 0) 


(1 ) 在 本 地 硬盘 创建 留 |@ga . @ -让 | Dun [ey xnn | | ean 
言 板 站 点 testsite 文件 夹 ， ED Dp\estsit, a 
并 建立 相关 的 子 文件 夹 用 来 局 一 
保存 文件 。 打 开光 盘 中 第 5 
章节 的 素材 chap05 文件 夹 下 
的 testsite 站 点 ， 可 以 看 到 
要 制作 的 站 点 文件 夹 结 构 如 
5-18 所 示 。 pn 


天 

















15 个 对 象 呵 用 磁盘 空间 : 10.6 6B) 


图 图 5-18 创建 站 扣 文 件 夹 testsite 


(2 ) 启动 Dreamweaver CS6， 执 行 菜单 栏 中 的 【文件 】 一 【 新建 命令， 新 建 一 个 HTML 
文档 。 设 置 好 网 页 属性 后 ， 输 入 网 页 标题 “留言 板 ”， 执 行 菜单 栏 中 的 【文件 】 一 【保存 】 
命令 ， 将 该 文档 保存 为 EnterMessage.htm。 


(3 ) 按 (Enter ) 键 换行 ， 执 行 


























菜单 栏 上 的 【 插入】 一 【表格 】 命 ee 
令 ， 打开 【 表格 】 对 话 框 ， 在 【 行 a 
数 ] 文本 框 中 输入 需要 插入 表格 的 行 | 


数 2， 在 【 列 数 ] 文本 框 中 输入 需要 
插入 表格 的 列 数 3， 在 【 表格 宽度 】 
文本 框 中 输入 389 像素 ， 其 他 的 保持 
默认 值 ， 如 图 5-19 所 示 。 单 击 【 确 二 | 
定 】 按钮 ， 在 【文档 】 窗 口中 插入 2 
行 3 列 的 表格 。 




















国 图 5-19 插入 表格 设置 














区 择 图 区 源 立 件 
(4 ) 拖 动 鼠标 选择 表格 第 ] 选择 文件 名 自 : Do 
行 中 的 中 个 单元 格 ， 然后 按 查找 范围 I): | 加 image v 多 让 户 回 : 
[ M 】 键 将 选择 的 3 引 | 里 元 禾 ni beijing. gif 8 shareforun. gif topicnew. gif 
顺 bg gif 号 topl. gif 二 topicnonew. gif 
各 为 A Ei 元 格 将 鼠 标 指 | endl. gif di top2. gif 0 toplogol. jpg 


Ee end2. gif 0a top3. eif WM toploeo2. ]PE 


oI 
然后 执行 菜单 栏 中 的 【插入 】 一 














文件 名 8): 


[图像 】 命 令 ， 打 开 【 选择 图 像 “| 站， | 国人 esitrizer jpeeit.pne* 
| 


389 x 150 JPEG, 20 K 7/ 














源 文 件 :] 对 赴 框 ， 在 该 单元 格 中 URL: testsite/inaee/toplogol. jpe 
插入 一 幅 图 像 toplogol.jpg， 如， |e 
5-20 所 示 。 单 击 【 确定 ] 按 ea 


钮 ， 完 成 图 像 的 插入 操作 。 








国 图 5-20 插入 图 片 操作 


( 5 ) 拖 动 鼠标 选择 第 2 行 表 格 ， 单 击 【 属性 检查 器 】 面 板 中 的 【居中 】 按 钮 主 |， 在 
背景 颜色 】 文 本 框 中 输入 #CCCCCC ( 灰色 )， 其 他 保持 默认 值 ， 如 图 5-21 所 示 。 


属性 

| 格式 加 无 Y| 类 Bf 湛江 生生 村 DC | 

用 cs DD 于 。，， vHWBOL jg 了 睛 加 

国 单元 格 。 水 平 名 默认 ~x| 宽 扣 | | 不 换行 曙 ) 门 ” 青 景 额 色 (@) | .| CCccc | 页 面 属性 . 
口 站 ” 重 直 人 0 默认 ~x| 高 如 | | 标题 色 口 


国 图 5-21 设置 【属性 检查 器 】 面 板 
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(OO 
(J ) 
C3 (6 ) 为 了 方便 浏览 者 留言 ， 需 要 在 表格 的 第 2 行 第 1 列 中 输入 “我 要 留言 ”文本 ， 并 设 
置 该 文本 为 一 个 跳 转 到 写 留 言 的 页 面 InsertMessage.asp 的 链接 对 象 ， 以 方便 发 言 。 
( 7 ) 如 果 希 望 查 看 留言 ， 可 以 在 表格 的 第 2 行 的 第 2 列 中 输入 “查看 留言 ”文本 ， 并 设 
置 该 文本 为 一 个 跑 转 到 查看 留言 页 和 耐 ListMessage.asp 的 链接 对 象 。 
( 8 ) 为 了 方便 留言 管理 者 进 Te] 5: testsites testsite EnterMessases. hta | 
入 后 合 进行 管理 ， 需 要 在 表格 的 as 
信人 二 人 人 -人 、 (1 A 区 269 
EE 2 行内 第 3 列 中 输入 “局 合 窟 北京 伊 婷美 业 科 技 开 发 有 限 公司 
理 ” 文 本 ， 并 设置 该 文本 为 一 个 i "六 伊 寻 类 业 国际 美容 美体 连锁 机 构 
跳 转 到 登录 后 合 管理 留言 页 面 | “ww 留言 板 | 
we le 0 
该 页 面 效 果 如 图 5-22 所 示 。 
587 <div. . .> [NR a QQ 00% vv S10 x 217v 21 KA/1 秘 简体 中 立 (6B2312) 四 
| 国 图 5-22 ” EnterMessage.htm 页 面 效 果 


5.4 功能 页 面 设计 


前 面 对 留 言 板 做 了 一 个 整体 规划 ， 还 需要 制作 用 户 发 言 的 页 面 InsertMessage.asp、 主 题 
列表 页 面 ListMessage.asp、 显 示 留 言 内容 的 页 面 ShowMessage.asp， 本 小 节 就 完成 这 些 动态 
功能 页 面 的 设计 与 制作 。 


5.4.1 插入 留言 页 面 


用 户 留 言 的 功能 主要 在 InsertMessage.asp 页 面 中 进行 ， 在 该 页 面 中 ， 提 供 多 个 文本 框 
表单 对 象 ， 人 允许 用 户 在 其 中 输入 留言， 当 用 户 单 击 【 提交】 按钮 进行 递交 时 ， 实 际 上 就 将 记 
录 添 加 到 数据 库 中 。 

插入 留言 页面 制作 步骤 如 下 。 

(1 ) 启动 Dreamweaver CS6， 执 行 菜单 栏 中 的 【文件 】 一 【 新建】 命令， 打开 【新 建文 
档 】 对 话 框 ， 新 建 一 个 动态 的 ASP VBScript 文档 ， 命 名 为 InsertMessage.asp， 设 置 后 执行 菜 
单 栏 上 的 【文件 】 一 【 保存】 命令， 在 站 扣 中 保存 这 个 页 面 。 





(2 ) 使 用 Dreamweaver CS6 中 提 
供 的 制作 静态 网 页 的 工具 完成 如 图 
5-23 所 示 的 静态 部 分 。 留 言 板 中 的 
动态 对 象 要 和 鞭 入 在 一 个 表单 中 。 





(a [| | 
rir | La =- 和 ii | 


是 图 5-23 ”设计 的 静态 页 面 
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这 《兼职 指导 : 

在 为 表单 对 象 命名 时 ， 由 于 表单 对 象 中 的 内 容 将 被 添加 到 message 表 中 ， 可 以 将 表单 对 
象 命名 为 与 相应 字段 相同 名 称 。 例 如 表 用 于 添加 主题 的 文本 框 命名 为 subject， 把 用 于 发 言 人 
的 文本 框 命名 为 author 等 。 这 样 做 的 目的 是 ， 当 该 表单 中 的 内 容 添加 到 message 表 中 时 会 自 
动 配对 。 


(3 ) 还 需要 设置 一 个 验证 表单 的 动作 ， 用 来 检验 浏览 者 在 表单 中 填写 的 内 容 是 售 满足 数 ”让 
据 库 中 表 message 中 字段 的 要 求 。 这 样 在 将 用 户 填写 的 注册 资料 提交 到 服务 器 之 前 ， 就 会 对 PB 
用 户 填 写 的 资料 进行 验证 。 如 果 有 不 符合 要 求 的 信息 ， 就 可 以 向 浏览 者 显示 错误 的 原因 ， 并 有 
让 浏 eo pe 
(4) 选 定 【 提 交 】 按钮 ， 执 行 菜单 栏 中 的 【 窗口 】 一 【行为 】 命 令 ， 则 会 打开 【行为 】 
面板 。 单 击 【 行 为】 面板 中 的 “+” 号 按钮 ， 从 弹出 的 行为 列表 中 选择 【 检查 表单 】 对 话语 
框 ， 添 加 验证 表单 的 动作 ， 则 会 弹出 【 检 到 表单 】 对 话 框 。 
(5 ) 在 该 对 话 框 中 进行 如 下 设置 。 i 
设置 subject 文本 域 的 验证 条 件 为 【 值 } 必需 的 ,【 可 接受 } 任何 东西 ， 即 该 文本 域 
必须 填写 ， 不 能 
设置 author 文本 域 的 验证 条 件 为 【 值 } 必需 的 ,【 可 接受 } 任何 东西 ， 意 义 同 subject。 
设置 Email 文本 域 的 验证 条 件 为 【可 接受 ]， 电 子 邮 件 地 址 ， 表 示 必 须 输 入 电子 信箱 地 址 。 








该 动作 完成 后 的 设置 如 
4 所 示 。 





值 : 必需 的 


可 接受 ”任何 东西 C 〇 数字 
O 〇 电子 邮件 地 址 ”CC 数字 从 














图 5-24 设置 【检查 表单 】 动 作 


( 6 ) 设置 完成 后 ， 单 击 【 确 
定 】 按 钮 ， 返 回 到 【文档 】 窗 
口 。 在 对 应 的 【 行为】 面板 中 设 
置 该 动作 的 触发 事件 为 onC1Tick， 
如 图 5-25 所 示 。 





图 5-25 【行为 】 面板 


) 接 下 来 就 应 该 在 数据 库 中 添加 一 条 用 户 记 录 ， 把 这 些 合 格 的 数据 添加 a 到 这 条 记录 的 
NW 执行 菜单 栏 中 的 】 一 【服务 器 行为 】 命 令 ， 打 开 服 务 怖 【行为 】 面 
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lo2 


板 。 单 击 该 面板 上 “+” 号 按钮 ， 从 弹出 的 菜单 中 选择 【 插入 记录 】 命 令 ， 则 会 打开 【 插入 
记录 】 对 话 框 。 

( 8 ) 在 该 对 话 框 中 进行 如 下 设置 。 

从 【连接 】 下 拉 列 表 框 中 选择 coonmessage 作为 数据 源 连接 对 象 。 

从 【插入 到 表格 】 下 拉 列 表 框 中 选择 message 作为 使 用 的 数据 库 表 对 象 。 

在 【插入 后 ， 转 到 】 文 本 框 中 设置 发 言 添 加 到 表 message 后 ， 跳 转 到 ListMessage.asp 


在 该 对 活 框 下 半 部 分 中 ， 将 网 页 中 的 表单 对 象 和 数据 库 中 表 message 中 的 字段 一 一 对 应 
起 来 。 
设置 完成 后 该 对 请 框 如 图 5-26 所 示 。 


























到 列 中 "sa 


hor 儿 入 
te 民生 中， ta “六 
sns 记 插入 到 列 中 eneil” CY 


lel 掉 [ 本 

| Conte < 全 蒜 入 到 列 划 <。 onten nt 记 二 
列 : | addres 

本 











图 5-26 设置 完成 后 的 【插入 记录 】 对 话 框 


3Y 兼 职 指导 : 

在 上 面 的 操作 中 ， 没 有 提供 添加 “发 言 时 间 ” 的 入 口 ， 这 是 因为 发 言 时 间 是 由 Access 
数据 库 根 据 记 录 被 保存 的 时 刻 自 行 计算 出 来 的 ， 这 主要 通过 指定 Message 表 的 Time 字段 的 
默认 值 而 实现 。 


(9 ) 设置 完成 后 ， 单 击 【 确定 】 按 钮 ， 关 闭 该 对 话 框 ， 返回 到 【文档 ] 窗口 。 
5.4.2 罗列 留言 页 面 


罗列 留言 页面 是 用 来 显示 所 有 的 留言 主题 列表 的 页 面 ， 当 网 页 浏览 者 单 击 一 个 主题 列表 
时 ， 可 以 忠 转 到 关于 该 主题 列表 的 详细 留言 ， 当 网 页 浏览 者 想 发 言 时 ， 可 以 单 击 “ 我 要 发 
言 ” 文 本 ， 打开 ListMessage.asp 页 面 ， 进 行 编写 留言 。 

罗列 留言 页 面 制作 步骤 如 下 。 

(1 ) 执行 菜单 栏 中 的 【文件 】 一 【 新建】 命令 ， 打开 【新 建文 档 】 对 话 框 ， 新 建 一 个 动 
态 的 ASP VBScript 文档 ， 命 名 为 ListMessage.asp， 设 置 后 执行 菜单 栏 上 的 【文件 ] 一 【 保 
存 】 人 命令， 在 站 点 中 保存 这 个 页 面 。 

( 2 ) 使 用 Dreamweaver CS6 中 提供 的 制作 静态 网 页 的 工具 完成 如 图 5-27 所 示 的 静态 


部 分 。 


ok 


扔 募 美 业 科 技 开 发 有 限 和 公司 (Ti Ting BeautyScience Co.，LID》 版 权 所 有 
抽 址 : 北京 市 朝阳 区 劲松 桥 乐 澜 宝 哪 1 号 悉 3 单 元 1203 室 电话 : 010-87796220730750760 








v 
body> <table> Ctr> <td> <table> <tr>[Kth [RR 100% v903 x 476v 120 /3 秒 简体 中 交 (GB2312) 








国 图 5-27 ListMessage.asp 静态 页 面 设计 效果 


( 3 ) 执行 菜单 栏 中 的 【窗口 】 一 【 绑 定 】 人 命令， 打开 【 绑 定 】 面 板 ， 单 击 该 面板 上 的 
“十 ”号 按钮 ， 从 弹出 的 菜单 中 选择 【 记录 集 ( 查询 )】 命 令 ， 则 会 打开 【 记录 集 】 对 话 框 。 

(4 ) 在 该 对 十 框 中 进行 如 下 设置 。 

在 【 名称】 文本 框 中 输入 rsMessage 作为 该 记录 集 的 名 称 。 

从 【连接 】 下 拉 列 表 框 中 选择 coonmessage 数据 源 连 接 对 象 。 

从 【表格 】 下 拉 列 表 框 中 选择 使 用 的 数据 库 表 对 象 为 message。 

在 【 列 】 栏 中 先 选 择 【 选 定 的 】 单 选 按钮 ， 然 后 从 下 面 的 字段 列表 框 中 选择 
subject、author 和 time 字段 。 

在 【排序 】 栏 中 设置 time 字段 的 内 容 对 记录 集中 的 记录 进行 “降序 ”排列 ， 也 就 是 将 
最 新 发 表 的 留言 内 容 排列 在 最 前 面 

完成 后 的 设置 如 图 5-28 所 示 。 


名称 
表格 


列 : 全 部 ”局 选 定 的 : 


排序 





国 图 5-28 定义 记录 集 参 数 


( 5 ) 设置 完成 后 ， 单 击 该 对 话 框 上 的 【 确定 】 按 钮 ， 关 闭 该 对 话 框 。 返 回 到 【文档 】 
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(6 ) 将 Recordsetl 记录 和 集中 的 字段 绑 定 到 页 面 上 相应 的 位 置 上 ， 效 果 如 图 5-29 所 示 。 














mnts = | -| 
3 ”A 际 美容 美体 连锁 机 构 
2 J 


R 小 订 所 - 击 40 
- 总 本 学 re 7 才 人 






rm 


. 








~ ns mr 47Rv 123 /3 秋 访 体 中 交 (082312) 


图 5-29 ”数据 绑 定 
(7) 在 【文档 】 窗 口中 拖 动 鼠标 选择 表格 的 第 2 行 。 单 击 服 务 颖 【行为 】 面 板 中 的 “+” 
号 按钮 ， 从 弹出 的 下 拉 菜 单 中 选择 【 重复 区 域 】 命令。 此 时 会 打开 【 重复 区 域 】 对话 框 。 


( 8 ) 在 【重复 区 域 】 对 话 框 中 【 记录 集 】 下 拉 列 表 中 选择 rsMessage 记录 集 。 在 【 显 
示 】 区 域 ,设置 在 一 页 中 显示 记录 的 数 自 为 10 条 ， 如 图 5-30 所 示 。 


| Cbedy) Cuble)? Or) CD Clable) ID [AT 9 oor 
U 一 一 


二 110 | 记录 
中 ”所 有 记录 





图 5-30 设置 【重复 区 域 】 对 话 框 
(9) 为 了 浏览 者 浏览 时 导航 方便 ， 还 需要 在 网 页 的 最 后 设置 一 个 动态 记录 导航 。 在 该 文 
档 中 插入 一 个 1 行 4 列 的 表格 ， 然 后 通过 表格 对 应 的 属性 设置 面板 设置 表格 的 相应 属性 。 最 
后 在 表格 的 4 个 单元 格 中 分 别 输入 “ 首 


页 、“ 上 一 页 、 下 一 页 、 “最 后 页 ”等 文本 字样 。 
( 10 ) 通过 拖 动 鼠标 ， 选 中 “首页 ”字样 。 单 击 服务 器 【 行为】 面板 中 的 “+” 号 按钮 ， 
从 弹出 的 下 拉 菜 单 中 执行 菜单 栏 中 的 【 记录 和 集 分 页 】 一 【 移 至 第 一 条 记录 


命令 ， 在 【 移 至 
第 一 条 记录 】 对 话 框 中 【 记录 集 】 下 拉 列 表 框 中 选择 rsMessage 记录 集 ， 如 图 5-31 所 示 。 


殉 至 第 一 条 记录 





5-31 设置 首页 的 链接 命令 
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女 n 


( 11 ) 通过 同样 的 方法 将 “上 一 页 ”、 ( 12 ) 通过 拖 动 鼠标 ， 选 中 “首页 ” 子 
“下 一 页 ”"、“ 最 后 页 ”文本 字样 添加 相应 的 ” 样 。 单 击 服务 器 【 行为】 面板 中 的 “+” 号 
服务 器 行为 ， 添 加 导航 栏 后 的 效果 如 图 5-32 ”按钮 ， 从 弹出 的 下 拉 菜 单 中 执行 菜单 栏 中 的 
所 示 。 【 显示 区 域 】 一 【如果 不 是 第 一 条 记录 则 显 
示 】 人 命令。 在 【 如 果 不 是 第 一 条 记录 则 显 
示 】 对 话 框 中 的 【 记录 集 】 下 拉 列 表 框 中 选 

择 rsMessage 记录 集 ， 如 图 5-33 所 示 。 








上 
| | 村 可 

| Y i L 
| lL 
| | 
| - 量 / | 

ee 各 i 

EP 首 卫 时 和 和 
| 人 2 i py 

| a bh 3 - PP i 本 

和 | - i 
旺 = 


RR 


训 果 不是 第 一 条 记录 则 显示 区 城 


























| 国 图 5-33 设置 显示 命令 




















-=| 
HH | 


国 图 5-32 添加 导航 栏 


( 13 ) 通过 同样 的 方法 将 
“上 一 页 ”"、“ 下 一 页 "、“ 最 后 
页 ”文本 字样 添加 相应 的 服务 
器 行为 。 设 置 显 示 和 人 隐藏 区 域 
后 的 效果 如 图 5-34 所 示 。 





一 各 | 上 一 站 
便 蜂 各 本 科 峙 开 过 看 转 此 司 呈 i Time BemtySriance sa., 
潮 址 ; 站 走 乒 秋风 区 秋生 拼 坏 恒 主 电 1 号 恒 汪 贡 吊 1203 宣 电 十 :i6770G2P0/ 30/75076n 





EE sm a ee 二 a 






ae 
全 ur ly a bi Dore szl a A A Eh I 中， 


央 图 5-34 设置 显示 和 隐藏 区 域 


(14 ) 接 下 来 还 需要 制作 。 庆 eeeeeew 一。 
一 个 计数 器 。 将 鼠标 指针 放置 i i FR 
在 记录 表格 的 前 面 ， 按 
《Enter 》 键 换行 ， 然 后 将 鼠标 
指针 放置 在 记录 表格 的 上 面 一 
行 中 ， 输 入 文本 “现在 显示 的 
是 第 X-Y 条 记录 ， 共 有 人 条 记 , z z 
a a 












Be El 
' ss 


乓 渤 关 汉 和 EESE 四 


iE 








入 车 
ml 


邵 融 妆 和 十 笠 捕 开 芒 淖 限 涩 司 ( Fi Ting BasntyS3eianre Ca 。 LT 
古寺 : 北京 币 帮 同 虹 斑 尺 障 祭 几 三 器 1 车 本 3 单元 1803 别 庄 : 010-67TOEYP0/ 30/ 30 BD 


le a ee _ [了 16 ”ET6 EX 和 履 便 标 中 文人 E3ia | 





























国名 5-35 输入 计数 器 名 称 
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0 
二 ( 15 ) 用 鼠标 选中 “X"”， 在 数据 绑 定 面板 中 展开 rsMessage 记录 集 ， 选 择 [第 一 个 记录 索 


1 引 ]， pe 【 插入】 按钮 ， 则 “X” 字 样 会 被 {rsMessage_first} 占 位 符 代 从 。 
) 在 【文档 】 窗 口中 选择 “Y ”字样 ， 在 数据 绑 定 面板 中 选择 [最 后 一 个 记录 索引 ]， 
Ee 【 插入】 按钮 ， 则 “Y” 字 样 会 被 {rsMessage_1last} 占 位 符 代替 。 在 窗口 中 
] AN” 字样 ， 在 数据 绑 定 面板 中 选择 [总 记录 数 ]， 然 后 单 击 【插入 】 按 钮 ， 则 “N ”字样 
会 被 {rsMessage_total} 占 位 和 代替 
绪 定 后 ， 计 数 器 中 的 文本 和 占 位 符 如 图 5-36 所 示 。 


testsites ListMsssass. asp 





1 
口 
x 











地 让: 北京 市 朝阳 区 劲松 桥 乐 滑 宝 哇 1 号 楼 3 单元 1203 室 电话 : 010- -87796220730750760 

















<body》 [RD 1100%  v|905 x 476v| 133 K /3 秒 | 简体 中 文 (552512) 
各 图 5-36 ”创建 计数 器 后 的 【 文档】 窗口 
\ | ( 17 ) 接 下 来 还 需要 在 网 页 中 设置 一 个 链接 对 象 ， 使 浏览 者 能 够 转 到 ShowMessage.asp 页 


面 中 查看 详细 的 留言 。 选 中 主题 下 “{rsMessage.subject}” 字 样 作 为 链接 ， 然 后 单 击 服务 器 
【行为 】 和 面板 中 的 “+” 号 按钮 ， 从 弹出 的 下 拉 菜 单 中 选择 【 转 到 详细 页 面 】 人 命令， 则 打开 
站 eh 】 对 话 框 。 

) 单 击 打开 【 连接 】 下 拉 列 表 框 ， 从 中 选择 应 用 【 转 到 详细 页 面 服务 器 行为 的 链 
接 。 。 | 文本 框 中 输入 细节 页 的 路 径 和 文件 名 ShowMessage.asp。 


) 在 【传递 URL 参数 】 外 2 
文件 以 参数 ID 作为 用 户 传 递 记 这 信息 页 Ehoviessaee as 
加 录 的 依据 ， 服 务 器 根据 ID 的 值 | , 























记录 集 : sllessage 


回 用 户 传递 其 选 下 的 记录 。 打 列 : [本 











开 【 列 】 下 拉 列 表 框 ， 从 中 选 传递 现 有 参数 : 四] URL 参数 
择 传递 URL 参数 所 对 应 的 字段 i 
名 称 ID， 如 图 5-37 所 示 。 





国 图 5-37 【 转 到 详细 页 面 】 对 话 框 


( 20 ) 执行 菜单 栏 中 的 【文件 】 一 【 保存】 命令 ， 将 修改 后 的 文档 保存 ， 在 Access 数据 
eh 预览 其 效果 。 以 上 完成 本 页 面 的 制作 。 
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5.4.3 显示 留言 页 面 


显示 现 有 留言 的 操作 是 在 ShowMessage.asp 页 面 中 实现 ， 主 要 是 在 单 击 罗列 员 后 链接 到 
该 实例 上 ， 并 显示 详细 的 信息 。 

制作 的 步骤 如 下 。 

(1 ) 启动 Dreamweaver CS6， 执 行 菜单 栏 中 的 【文件 ] 一 【 新建] 命令， 打开 【新 建文 
档 】 对 话 框 ， 新 建 一 个 动态 的 ASP VBScript 文档 ， 命 名 为 ShowMessage.asp， 设 置 后 执行 菜 
单 栏 上 的 【文件 】 一 【 保存】 命令， 在 站 扣 中 保存 这 个 页 面 。 






( 2 ) 使 用 Dreamweaver CS6 
中 提供 的 制作 静态 网 页 的 工具 ， 






完成 如 图 5-38 所 示 的 静态 半 。 Fi 
分 ， 茶 中 的 “返回 留言 人 表征 4 
链接 到 ListMessage.asp 页 向 。 ee 二 


EL 
TT 1 
a 


EE 肤 呈 中 记 萌 EE EL 
CT T 和 


3 
| 中 1 | 






































| 图 5-38 ShowMessage.asp 静态 页 面 设计 


( 3 ) 执行 菜单 栏 中 的 【窗口 ] 一 【 绑 定 】 人 命令， 打开 【 绑 定 】 面 板 ， 单 击 该 面板 上 的 
“二 ”号 按钮 ， 从 弹出 的 菜单 中 选择 【 记录 集 (查询 ) 】 命令， 则 会 打开 【 记录 集 】 对 话 框 。 

(4 ) 在 该 对 三 框 中 进行 如 下 设置 。 

在 【 名称] 文本 框 中 输入 rsMessage 作为 该 记录 集 的 名 称 。 

从 【连接 】 下 拉 列 表 框 中 选择 coonmessage 数据 源 连 接 对 象 。 

从 【表格 】 下 拉 列 表 框 中 选择 使 用 的 数据 库 表 对 象 为 message。 

在 【 列 】 栏 中 先 选择 【 全 部 】 单 选 按钮 。 

完成 后 的 设置 如 图 5-39 所 示 。 


名 称 ; 


也 攻 马 
加 上 忆 已 启 IUTm 已 三 三 忌 蕊 己 


表格 


列 : 局 全 部 。 避 选 定 的 : 
1 








国 图 5-39 定义 记录 集 
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/ 成 的 效果 如 图 5-40 所 示 。 





-ol 
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(5 ) 设置 完成 后 ， 单 击 该 对 话 杠 上 的 【 确定】 按钮 ， 关闭 该 对 话 框 ， 返 回 到 【文档 】 
窗口 。 







纳入 婵 美 业 科技 开发 有 限 公 司 
好 区 业 国际 芍 窜 欧 惊 连 绩 机 攀 


fh 





(6 ) 将 rsMessage 记录 集中 的 BD 
字段 绑 定 到 页 面 上 相应 的 位 置 ， 完 < = 一 


EE 





pb 二 
t : 日 了 
Br mm ee mm Tri as i a ed a ei i i i i i i i i a es 

和 
上 [LU GLEE EE EE 


下 | IE I 中 访 2) 


国 图 5-40 绑 定 记录 集 
(7 ) 执行 菜单 栏 中 的 【文件 】 一 【 保存】 命令， 将 修改 后 的 文档 保存 。 


5.5 网 站 后 台 管 理 功能 设计 


为 了 维护 企业 网 站 的 安全 性 ， 防 止 菜 些 用 户 在 留言 板 上 留 一 些 有 害 的 留言 ， 留 言 板 还 需 
要 设计 一 个 后 合 管理 功能 ， 方 便 企 业 对 留言 板 进行 管理 和 控制 。 这 就 需要 制作 登录 后 合 管理 
的 页 面 Admin.asp， 以 及 选择 删除 多 余 留 言 的 页 面 DeleteMessage.asp 和 删除 的 页 面 
De jeteok.asp。 


5.5.1 后 台 登 录 页 面 

Admin.asp 是 用 于 后 从 登录 的 页 面 ， 页 面 比较 简单 ， 需 要 用 户 名 及 密码 两 个 动态 对 象 及 
是 交 表 单 功能 按钮 。 

制作 的 步骤 如 下 。 

(1 ) 启动 Dreamweaver CS6， 执 行 菜单 栏 中 的 【文件 】 一 【 新建 】 命 令 ， 打 开 【 新 建文 
档 】 对 话 框 ， 新 建 一 个 动态 的 ASP VBScript 文档 ， 命 名 为 Admin.asp， 设 置 后 执行 菜单 栏 上 
的 【文件 】 一 【保存 】 命 令 ， 在 站 挟 中 保存 这 个 页 面 。 

te 有 

(2 ) 使 用 Dreamweaver TPR 
CS6 中 提供 的 制作 静态 网 页 
的 工具 ， 完 成 如 图 5-41 所 
示 的 静态 部 分 。 


动 








So :9 
天 i 
已 由 

A > 3 > MMMMNMNY NN 
“0 


(3) 登录 密码 修改 
body> [RI 100%  v|635 x 218v| 5 /1 秒 | 简体 中 站 (GB2312) 


国 图 5-41 制作 的 静态 页 面 效果 











( 3 ) 由 于 输入 用 户 名 及 密码 后 需要 与 数据 库 Admin.mdb 中 的 用 户 名 及 密码 进行 核对 ， 所 
以 首先 要 建立 新 的 数据 库 连 接 。 执 行 菜单 栏 中 的 【窗口 】 一 【 数据库】 命令， 打开 【 数据 | 
库 】 对 话 框 ， 单 击 该 对 话 杠 中 的 “+” 号 按钮 ， 从 弹出 的 下 拉 菜 单 中 选择 【 数据 源 名 称 | 
( DSN ) 】 命 令 ， 打 开 【 数据 源 名 称 ( DSN )】 对 话 框 ， 通 过 该 对 话 框 为 当前 站 点 建立 一 个 数据 
源 连接 。 在 【 连接 名 称 】 文 本 框 中 输入 数据 源 连 接 的 名 称 为 coon， 单 击 【 数据 源 名 称 
(DSN) 】 文 本 框 右边 的 三 角 按 钮 鲁 ， 从 打开 的 下 拉 荣 单 中 选择 之 前 创建 的 dsnmessage 系统 数 
据 源 ， 其 他 的 保持 默认 值 ， 如 图 5-42 所 示 。 


数据 源 名 称 (D5NH) 








连接 名 称 : |coor 
数据 源 名 称 上 SI : 
用 户 名 :| 
密码 : | 

Dreamweaver 应 连接 : 〇 使 用 测试 服务 器 上 的 DSN 
Q 使 用 本 地 DsH , 




















图 5-42 建立 数据 库 连 接 


( 4) 单 击 【 确定】 按钮 ， 完 成 数据 库 连 接 ， 使 用 户 可 以 通过 该 网 页 中 表单 的 提交 实现 登 
录 功 能 。 执 行 菜单 栏 中 的 【 窗口 ] 一 【服务 器 行为 ] 命令 ， 打开 【服务 器 行为 】 徊 板 。 单 击 


该 面板 上 的 “+” 号 按钮 ， 从 打开 的 菜单 中 选择 【 用 户 身份 验证 】 一 【 登录 用 户 】 命 令 ， 
图 5-43 所 示 ， 回 该 网 页 添加 登录 用 户 的 服务 名 行为 。 





十 ， 一 其 档 关 型 SF YESeript 


记录 集 ( 查询 ) 
命令 
重复 区 域 
记录 集 分 页 
-显示 区 域 
| 动态 文本 
转 到 详细 页 面 
转 到 相关 页 面 | 部 
;插入 记录 大 a 
更 新 记录 





册 除 记录 
动态 表单 元 素 有 
用 尸身 份 糙 证 





限制 对 页 的 态 问 XSLT 转换 


王 
1 
注 销 用 户 2 本 
编辑 服务 器 行 洲 - 国 
查 
人 新 建 服 邯 器 行当 | 2 
( 未 职 更 才 服 邯 器 行当 ， ”下 志 


| 图 5-43 ”添加 【 登录 用 户 】 的 服务 器 行为 
( 5 ) 此 时 打开 【登录 用 户 】 对 话 框 ， 该 对 话 框 的 第 一 部 分 用 来 设置 表单 中 的 文本 域 的 功 
能 ， 具 体 进 行 如 下 设置 。 
从 【从 表单 获取 输入 】 下 拉 菜 单 中 选择 该 服务 絮 行 为 使 用 网 页 中 的 forml 表单 对 象 中 浏 
览 者 填写 的 对 象 。 
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(2 从 【 用户 名 字段 】 下 拉 列 表 中 选择 文本 域 admin 对 象 ， 设 定 该 用 户 登 录 服务 器 行为 的 用 

户 名 数据 来 源 为 表单 的 admin 文本 域 中 浏览 者 输入 的 内 容 。 

从 【 密码 字段 】 下 拉 列 表 中 选择 文本 域 password 对 象 ， 设 定 该 用 户 登 录 服 务 器 行为 的 
密码 数据 来 源 为 表单 的 password 文本 域 中 浏览 者 输入 的 内 容 。 

从 【使 用 连接 验证 】 下 拉 菜 单 中 选择 用 户 登 录 服 务 器 行为 使 用 的 数据 源 连 接 对 象 为 
CONNo 

从 【表格 】 下 拉 莱 单 中 选择 该 用 户 登录 服务 器 行为 使 用 到 的 数据 库 表 对 象 为 Admin。 

从 【 用 户 名 列 】 下 拉 菜 单 中 选择 表 Admin 存储 用 户 名 的 字段 为 Admin 字段 。 

从 【 密码 列 】 下 拉 菜 单 中 选择 表 Admin 存储 用 户 密码 的 字段 为 Password 字段 。 

在 【 如 果 登 录 成 功 ， 转 到 】 文本 框 中 输入 登录 成 功 后 ， 转 向 DeleteMessage.asp 页 面 。 

在 【 如果 登录 失败 ， 转 到 】 文 本 框 中 输入 登录 失败 后 ， 转 向 Admin.asp 页 向。 

其 他 的 保持 默认 值 ， 设 置 后 的 对 话 框 如 图 5-44 所 示 。 





从 表单 获取 输 入 : | form 
用 户 名 字段 : | admi 
密码 字段 pe asSsSyor 























使 用 连接 验证 : Coo 
表格 : 

















用 户 名 列 : |Aani 








密码 列 : | 











如 果 登 录 成 功 ， 转 到 : /Deletellessaze. asp 


回转 到 前 一 个 URL 如 果 它 存在 ) 
如 果 登 录 失 败 ， 转 到 : [jhdmin. asp 




















基于 以 下 项 限制 访问 : @) 用 户 名 和 密码 
C 〇 ”用户 名 、 密 码 和 访问 级 别 
获 职 级 别 自 : 





5-44 【登录 用 户 】 对 话 框 





溉 据 库 | 绪 定 | 服 沉 器 行为 | 7 
十 一 苹 档 类 型 : ASP YBScript 
登录 用 户 





( 6 ) 设置 完成 ， 单 击 【 确 
习 定 】 按 钮 ， 完 成 登录 页 面 的 制 
作 ， 此 时 的 【服务 器 行为 】 面 

板 如 图 5-45 所 示 。 


图 5-45 设置 后 的 【服务 怖 行为 】 面 板 


5.5.2 删除 留言 页 面 
登录 成 功 后 进入 DeleteMessage.asp 页 面 ， 此 页 面 同 前 面 制作 的 ListMessage.asp 页 面 一 
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样 ， 不 同 的 地 方 就 是 单 击 想 要 删除 的 留言 主题 ， 能 进入 Deleteok 页 面 进 行 删除 。 
DeleteMessage.asp 页 面 制作 的 步骤 如 下 。 


) 在 Dreamweaver CS6 中 双击 【 文 
件 】 ee 制作 好 的 ListMessage.asp 
页 面 ， 然 后 再 执行 菜单 栏 上 的 【文件 】 一 
【 另存 为 ] 命令， 打开 【另存 为 】 对 话 框 ， 
在 【文件 名 】 文 本 框 中 输入 DeleteMessage， 
如 图 5-46 所 示 。 


在。 所 有 间 森 本 ,ha: html: 5 cht 让。 到 hd 了 = 





图 5-46 另存 文件 为 DeleteMessage.asp 








) 单 击 【 保存 】 按 钮 ， 
ne 
的 页 面 中 将 “浏览 留言 ” “我 
要 和 留言” 说明 文字 删除 ， 改 输 
入 为 “请 单 击 选择 要 删除 的 留 








So (1 


| “入 et Po 言 ， 进 入 删除 页 面 "， 并 加 入 其 









[bringe Re (rer Ee A sag mebiljl 
还 着: 本 由 上 下 wh 咎 会 计 亲 条 间 | 加 示 





= = 他 一 些 查 询 显 示人 信息， 完成 后 
但 蔡 轴 二 科技 下 发 有 限 父 司 《Ti Tins BowolySeienee Ce.，LIB》 版 权 所 有 人 口 ~\ 3 元 
I 电话 : 010"077T06220130750760 
的 效果 如 图 5-47 所 示 。 


| “| 
Nable> <tr> <td> ctable> Cra | 10x -86 x $405v 133K 于 种 征 体 中 文 W52315) 


国 图 5-47 修改 后 的 页 面 效 果 


) 接 下 来 修改 该 页 面 ， 单 击 留言 ( 4 ) 打开 【 转 到 详细 页 面 】 对话 框 。 在 
了 Deleteok.asp 页 面 ， 双 击 [ 服 【 详细 信息 页 】 文 本 框 中 输入 要 转 入 的 新 页 
】 面板 中 的 【 转 到 详细 页 面 ] 行 面 Deleteok.asp， 如 图 5-49 所 示 。 


为 如 图 =U40 所 示 。 
所 放 | 二 | 妥 % 吕 为 | 二 
十 一 发 档 灶 型 : 和 BF VE3eript 


记录 集 六 sWessage] 
动态 六 本 人 rsllessage. first record) 
动态 站 本 [rsNessage. last record) 
动态 亲本 [rsNessage. total record) 
重复 区 域 frsNMessaee) 

1 转 到 | 详细 页 面 


如 培 F 
话语 悦 息 页 : PE EE 
世间 吗 L 才 涛 : |I0 设置 背 以 下 两 的 估 


记录 章 : retesupe 和 
列 : | 王 ww 
动 音 羡 本 [rsNessage. subject) 
动态 羡 本 rsessage, author) 
动态 六 本 [roNessaee. lei) 
动态 亲本 [rsNessage. address) 


个 课 现 有 湖 凑 ; 世 ] UEL 坦 监 
口 圳 单 带 数 





草图 5-48 ”选择 【 转 到 详细 页 面 ] 行为 
) 单 击 【确定 按钮 ， 完 成 DeleteMessage.asp 的 制作 。 
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5.5.3 删除 成 功 页 面 


这 个 页 面 是 真正 实现 留言 删除 的 页 面 ， 主 要 应 用 到 了 【 服务 器 行为 】 面 板 中 的 【 删除 记 
录 】 命 令 。 此 页 面 同 前 面 制作 的 ShowMessage.asp 页 面 一 样 ， 不 同 的 地 方 是 需要 插入 一 个 表 
单 和 一 个 删除 按钮 ， 这 是 因为 提交 删除 命令 时 需要 把 所 有 的 数据 传 到 数据 库 中 。 

Deleteok.asp 页 面 制作 的 步骤 如 下 。 

(1 ) 启动 Dreamweaver CS6， 执 行 菜 单 栏 中 的 【文件 】 一 【 新建] 命令， 打开 【新 建文 
” 档 】 对 话 框 ， 新 建 一 个 动态 的 ASP VBScript 文档 ， 命 名 为 Deleteok.asp， 设 置 后 执行 菜单 栏 
上 的 【文件 】 一 【保存 】 命 令 ， 在 站 点 中 保存 这 个 页 面 。 











| ( 2 ) 使 用 Dreamweaver CS6 中 

| 提供 的 制作 静态 网 页 的 工具 ， 完 

| 成 如 图 5-50 所 示 的 静态 部 分 。 本 RE | 

| 

四 epee 
轩 DC | 

| | ee 人 和 

: 本 
vv MWL 

A 西口 oo 、 83 x (10。 J21 /3 亲 导体 中文 (ot23l2 


图 5-50 Deleteok.asp 静态 页 面 设计 效果 


( 3 ) 执行 菜单 栏 中 的 【 窗口 】 一 【 绑 定 】 人 命令， 打开 【 绑 定 】 面 板 ， 单 击 该 面板 上 
“+” 按 钮 ， 从 弹出 的 菜单 中 选择 【 记录 集 ( 查 询 ) 】 命 令 ， 则 会 打开 【 记录 集 】 对 话 框 。 

( 4 ) 在 该 对 话 框 中 进行 如 下 设置 。 

在 【 名称] 文本 框 中 输入 rsMessage 作为 该 记录 集 的 名 称 。 

从 【连接 】 下 拉 列 表 框 中 选择 coonmessage 数据 源 连 接 对 象 。 

从 【表格 】 下 拉 列 表 杠 中， 选择 使 用 的 数据 库 表 对 象 为 message。 

在 【 列 】 栏 中 先 选择 【 全 部 】 单 选 按钮 。 




















一 在 【 算 选 】 栏 中 设置 记 
有 录 集 过 滤 的 条 件 为 : ID: =， 
URL 参数 : ID， 意 思 是 由 指定 
的 ID 值 进 行 URL 参数 的 传 
递 ， 如 图 5-51 所 示 。 


















































图 5-51 定义 记录 集 
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( 5 ) 设置 完成 后 ， 单 击 该 对 话 杠 上 的 【 确定】 按钮 ， 关 闭 该 对 话 框 ， 返 回 到 【文档 】 


窗口 。 
( 6) 将 rsMessage 记录 集中 的 字段 绑 定 到 页 面 上 相应 的 位 置 ， 完 成 的 效果 如 图 5-52 


所 未。 











本 | 1 图 
<body> [RQ 100% vv836xd446v 127K73 秒 简体 中 文人 62312) 








图 5-52 绑 定 记录 集 


DA/ 


( 7 ) 执行 菜单 栏 中 的 【窗口 ] 一 【服务 器 行为 ] 人 命令， 打开 【服务 器 行为 】 面 板 。 单 击 该 
面板 上 的 “+” 按 钮 ， 从 打开 的 菜单 中 选择 【 删除 记录 】 命 令 ， 添 加 删除 记录 的 服务 强行 为 。 

( 8 ) 此 时 打开 【 删除 记录 】 对 话 框 ， 该 对 话 框 的 第 一 部 分 用 来 设置 表单 中 的 文本 域 的 功 
能 ， 上 有 具体 进 行 如 下 设置 。 

从 【连接 】 下 拉 菜 单 中 选择 coonmessage 作为 数据 源 连接 对 象 。 

从 【从 表格 中 删除 】 下 拉 菜 单 中 选择 message 作为 使 用 的 数据 库 表 对 象 ， 即 存储 讨论 主 
题 的 表 对 象 。 

从 【选取 记录 自 】 下 拉 菜 单 中 选择 rsMessage 记录 集 作 为 要 删除 的 记录 对 象 。 

在 【 唯一 键 列 】 下 拉 荣 单 中 选择 主键 字段 为 ID 

从 【提交 此 表单 以 删除 】 下 拉 荣 单 中 选择 form1。 

在 【删除 后 ， 转 到 】 栏 中 设置 记录 成 功 删 除 后 ， 转 到 EnterMessage.htm 网 页 。 

其 他 的 保持 默认 值 ， 设 置 后 的 面板 如 图 5-53 所 示 。 


演 接 
从 六 局 中 国 除 
了 记录 自 


唯一 键 列 : | 工 D 数字 


提 克 此 表单 以 朋 除 - 
出 除 后 ， 转 到 TE 





各 图 5-53 设置 完成 后 的 【 删除 记录 】 对 话 框 
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en 





(50 





























9 ) 单 击 【确定 】 按 钮 ， 完 成 删除 记录 行为 设置 ， 执 行 菜单 栏 中 的 【文件 】 一 【保存 】 


命令 ， 将 文档 保存 。 


-5.6 测试 留言 板 


后 杨 的 测 二 优化 俱 抽 和 尖 过 在 浏览 器 中 测试 留言 板 的 执行 效果 ， 查 找 出 该 留言 板 
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5.6.1 留言 测试 
测试 的 步 强 水 如 下 。 


1 ) 首先 要 在 message mdb 数据 库 中 “ET 
输入 一 些 准 备 测试 用 的 数据 。 打 开 IE 浏 :OiE-.©O 四 国人 约 站 迷 次 Wix i @ 从 
览 器 ， 在 地 址 栏 中 输入 http:/127.0.0.1/ 
testsite/EnterMessage.htm ( 也 可 以 把 程 
序 上 传 到 远程 服务 器 上 进行 测试 )， 打 开 <" 馈 "外 打 关 业 国 际 关 容 类 体 连 负 机 构 
EnterMessage.htm 文件 ， 如 图 5-54 所 Wa 留言 极 
示 。 在 该 员 面 中 单 击 “我 要 和 留言” 文本， 我 要 留言 。 查看 留言 
跳 转 到 InsertMessage.asp 页 面 。 





北京 伊 婷美 业 科 技 开 发 有 限 公司 





国 图 5-54 EnterMessage.htm 页 面 


) 在 InsertMessage.asp 页 面 中 ， 输 入 留言 内 容 ， 如 图 5-55 所 示 。 


康 全 下 篇 司 严 查看 是) 长 枯 工具 本 ) 可 曲 双 ) 


" 赔 - 国 轩 鄙 | 户 i 写 . 避 国 - 品 性 志 


对 要 北京 开 共 贞 
再 丙 


OH 1 说 明 : 在 加 国共 列 中 畏 六 二 故 的 种 老区 再 。、 芭 万 、55 有 12 万 国 促 中 的 一 梓 ) 
北京 揭 广 告 魏 看 过 ， 在 情 品 、 革 学 虱 有 ， 在 北京 项 ， 特 应 读 轨 岂 加 盟 ? 请 回复 。 

















量 图 5-55 填写 留言 板 


) 输入 留言 内 容 后 ， 单 击 【 提交 】 按 钮 ， 浏 览 器 会 自动 跳 转 到 ListMessage.asp 页 
面 ， 如 图 5-56 所 示 。 


动 志 列 一面 让 民 工 GE 下 让 E 下 和 CGIEE 蕊 KareT 
于 六 全 看” 本 情 下 查看 吧 。 收 坏 由 工具 部) 大 后 吕 
的 嫩 二 辐 ' 呈 加 -回答 坦 
站 高 上 婷美 业 科 技 开 沉 有 限 作 司 
才 业 国 际 美容 美体 连锁 机 构 





， 启 嘴 留言 
辆 在 星 导 的 是 第 1- 10 过 让 好 ， 韭 有 15 条 记 时 
主 轩 受 表 时 间 





ST | 


者 要 开机 十 2 
想 加 朋 :不曾 宣 传 原 实 全 i TS- W055.2| 
， 昌吉 加 用 i HS 5:5 I 

重光 甬 姓 幅 识 的 喜 困 加 但 定 | Hn 111: 3 9 

1 和 本 


1 





图 5-56 显示 留言 列表 


jy 兼职 指导 
从 图 5-56 ee 此 时 在 网 页 中 有 多 条 信息 ， 刚 才 在 网 页 InsertMessage.asp 中 提 
交 的 信 息 显 示 在 第 条 ， 其 他 的 信 息 是 已 存在 于 数据 库 中 的 。 


) 单 击 ListMessage.asp 页 向 中 留言 主题 文字 上 提供 的 链接 对 象 ， 跳 转 到 
ed asp 页 面 查 看 留言 的 详细 内 容 ， 如 图 5-57 所 示 。 所 链接 的 是 第 一 条 信息 ， 要 解 
决 这 个 问题 ， 需 要 对 罗列 页 单 击 选择 “主题 ”后 的 值 传 人 显示 页 面 并 显示 相关 的 内 容 。 


次 价 @) 访 构 华 ) ”查看 名 收藏) 了 工具 并 帮助 0D) 


息 银 - 轩 - 门 国 的 万 各 广 tx 大 af 所 -， 


仿生 加: 莪 要 在 北京 开 抬 
a 
PE DS 0.57: 16 


te 瑟 忌 优 笠 ; ET < 的 
哆 。 ss: 北 页 的 三 涯 我 着 过， 在 精 业 、 科 单 若 有， 下 北京 益 ， 乳 太 订 轧 么 加 秋 ? 请 回复 。 


他 半生 业 科 技 开 尼 有限 公司 (Ti Tiamg BewetyScieace Co 
地 让 ; 北京 市 蔓 用 区 和 孙 术 二 和 奈 油 实 时 1 号 模 3 单 元 1203 宣 电话 ;: 010-6TT06220730750/ 





国 图 5-57 查看 留言 
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CoS6 
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(5) 这 里 打开 ShowMessage.asp 名 称 : ER 
页 面 进行 进一步 的 完善 ， 双 击 服务 乙 0 
= 、 表格 : message 
pA 、\ ~、 局 < 三 | 
行为 中 建立 的 rsMessage 记录 集 ， 在 a 





弹出 的 对 话 框 中 进行 修改 ， 由 于 设置 
了 ID 值 是 自动 生成 的 唯一 键 值 ， 可 
以 筛选 ID，=，URL 参数 .ID 值 ， 意 
思 是 由 指定 的 ID 值 进行 URL 参数 的 
传递 ， 修 改 如 图 5-58 所 示 。 


口 












































国 图 5-58 修改 筛选 值 


) 在 ShowMessage.asp 页 面 中 ， 能 够 显示 出 发 言 人 的 E-mail 地 址 。 但 是 现在 的 网 页 中 
旦 。 纯 文本 型 的 E-mail 地 址 ， 还 应 该 创建 E-mail 链接 ， 使 浏览 者 单 击 该 地 址 能 够 直 
eas 给 该 留言 人 发 邮件 。 

) 选中 {rsMessage.email}j 字 段 ， 然 后 在 对 应 的 属性 设置 面板 中 的 【 链接 文本 框 中 
本 mailto: <%=(rsMessage.Fields.Item("email").Value)%>， 如 图 5-59 所 示 。 





尾 性 
xm Rl 本 天 Br 汪 注 此 此 标题 DO[ | 
本 ss | DD le terser Fie | 村 @[ 辣 


9 单元 格 。 水 平 色 | 默认 ”~x| 宽 吕 | | 不 换行 中 ) 口 青 且 颜色 人 [| | [页 面 属 性 
一 口 下 得 直 加 时 人 v| 商业 [ 本 标题 @ 口 


司 图 5-59 ”创建 邮件 链接 


) 编辑 完成 后 ， 将 网 页 保存 。 可 以 进行 测 计 ， 单 击 该 邮件 链接 对 象 ， 就 可 以 局 动 默 认 
的 邮件 编辑 软件 ， Outlook 等 ， 傣 浏览 者 给 该 留言 人 发 邮件 。 


5.6.2 后 癌 管理 测试 
接 下 来 测试 后 合 管理 部 分 ， 测 试 的 步骤 如 下 。 





玄 件 看) 情人 由 让 1) 查看 总) 收 醒 避 ) 工具 本 i 条 助 而) 
Ga © OBO Pm wo Sm ©| -8 


到 | 王 ] hap ee, yl, com Urstai Le daki 


(1 ) 打开 IE 浏览 器 ， 在 地 址 栏 中 输 
伊 婷美 业 后 台 管 理 


入 http:/localhost/EnterMessage.htm ， 一 
打开 EnterMessage.htm 文件 ， 在 该 页 面 
中 单 击 “ 后 全 管理 ”文本 ， 跳 转 到 
Admin.asp 页 面 ， 如 图 5-60 所 示 。 


\2) 留言 板 后 台 和 登陆 音 理 





国 图 5-60 ”打开 后 合 登 录 页 面 


| 四 
训 坪 正面 国 到) -一 Fr 工具 时 | “ 硬 芍 吉 ) 
Se 2 和 


Us Fh 
| /者 | 
) 在 【用 户 】 文 本 框 中 输入 | ， ti a 
admin ， 在 【密码 】 文 本 框 中 输入 . 
admin， 然 后 单 击 【 确定 】 按 钮 ， 进 入 
DeleteMessage.asp， 如 图 5-61 所 示 。 


请 塌 对 种 刘 大 本 千 汪 | 二 页 。 运 上 村 际 百 夯 
国志 量 负 有 0 晤 陋 1- 电 衣 代表 ， 泗 帮 | 训 记 量 


dd 
也 第 咖 硬 怕 两 


这 画 奋 斗 平 再 五 项 且 时 


直上 局 贡 芒 理 Nar Jit eenel Frplo 
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( 3 ) 这 里 选择 页 面 中 的 “平面 设 
计 ” 主 题 ， 打 开平 面 设计 相关 留言 处 
Deleteok.asp 页 面 ， 如 图 5-62 所 示 。 


证 有 六 和 舍 才 看 过 。 下 导 品 ， 利 于 可 有 ,到 兹 宗 站 要 肛 衣 于 屿 各 国富 十 曾 本 。 


而 隘 |] 
5-62 打开 要 删除 的 Deleteok.asp 页 面 


) 单 击 页 面 上 的 【 删除】 按钮 ， 避 会 才 除 该 记录 ， 并 返回 留言 板 的 首页 
站 htm， 说 明 后 合 管理 系统 测试 成 功 。 这 样 整个 留言 系统 就 全 部 设计 完成 。 
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领域 的 市 场 非常 大 ， 通 过 因特网 来 进行 培训 
人 领域 。 一 般 的 教育 类 网 站 都 会 包括 一 些 
新 闻 系 统 ， 这 是 兼职 人 员 所 要 掌握 的 一 个 重要 功能 系 
统 。 本 章 将 人 召 教育 类 网 站 的 建设 ， 教 育 类 网 站 的 开 
发 与 制作 需要 网 站 建设 者 的 精心 规划 .对 于 一 个 在 线 
辅导 型 网 站 ， 在 功能 上 主要 应 将 重点 放 在 对 学 员 的 管 
理 、 信息 的 发 布 及 后 台 对 学 员 的 管理 上 。 本 章 选 择 了 
自考 教育 网 ”来 部 明 这 一 类 网 站 的 规划 与 建设 ， 
和 对 建设 相 大 尖 竺 网 站 的 兼职 人 员 有 所 借 几 | 
















el 2 i 二 到 A - 
Se © a Pm ee - 泡 加 -加 地 | z 








一 -一 一 





| 


School 下 BEWS 十 
| 昌 ee i 
































6.1 教育 网 站 功能 分 析 


教育 类 网 站 主要 是 为 学 员 提供 在 线 信息 检索 、 在 线 学 习 等 功能 ， 如 果 需 要 ， 还 应 开发 大 
规模 的 在 线 学 习 视频 课件 ， 还 有 的 一 些 网 站 使 用 的 是 音频 课件 。 由 于 教育 类 网 站 所 面 对 的 济 
览 者 比较 特别 ， 在 开发 之 前 兼职 人 员 一 定 要 先 与 网 站 拥有 者 进行 交流 ， 掌 握 企 业 想 通过 网 站 
主要 实现 哪 此 功能， 因地制宜， 选择 适合 的 技术 实现 这 些 功能 。 下 面 就 参考 “中 国 自考 教育 
网 ”建设 前 的 规划 ， 来 介绍 一 般 的 教育 网 站 主要 的 作用 有 如 下 几 个 方面 。 

(1 ) 提升 学 校 的 形象 。 因 为 随 着 因特网 的 普及 和 新 经 济 时 代 的 来 临 ， 网 络 课堂 建设 已 成 
为 学 校 教育 的 一 部 分 。 

( 2 ) 学 生 可 以 随时 随地 上 “中 国 自考 教育 网 ”了 解 和 选 购 所 需要 的 自考 信息 ， 查 阅 详细 
的 信息 和 自考 教育 中 心 的 服务 方式 ， 并 可 以 通过 客户 反馈 表 的 Web 交互 程序 ， 用 最 快 的 速度 
和 图 文 并 茂 的 方式 ， 进 行 询问 、 留 言 、 订 购 等 信息 交流 。 特 别 是 该 教育 中 心 的 经 营 特点 ， 大 
部 分 自考 学 生 群 体 基 本 上 都 有 上 网 条 件 和 上 网 习惯 ， 为 开拓 潜在 客户 群英 定 基础 。 

( 3 ) 随 着 因特网 的 普及 ， 电 子 商务 已 有 不 可 阻挡 的 趋势 ， 早 建立 网 站 早 得 益 。 要 开辟 网 
上 书店 等 相关 的 功能 。 

(4 ) 为 了 满足 经 营 的 需要 ， 开 辟 北 京 、 上 海 、 深 圳 等 大 城市 专栏 ， 让 代理 者 拥有 自己 的 
言 息 发 布 平台 ， 适 合 各 地 的 招生 与 辅导 。 

(5 ) 采取 在 线 学 员 制 ， 编 写 功能 较 强 大 的 学 员 在 线 注册 系统 ， 并 有 后 台 管 理 系 统 ， 以 广 
便 对 注册 学 员 的 统一 管理 。 


6.1.1 核心 功能 分 析 


通过 与 自考 教育 中 心 的 主要 负责 人 的 沟通 ， 大 致 取得 了 一 些 共 识 。 就 这 类 网 站 而 言 ， 最 
重要 的 莫 过 于 内 容 和 交互 性 。 因 对 应 人 群 大 部 分 为 学 生 ， 其 上 网 时 间 比 其 他 人 和 群 稍 高 ， 所 以 
最 能 吸引 他 们 的 应 该 是 详尽 的 内 容 。 内 容 应 该 围绕 如 下 功能 区 块 进行 设计 。 

(1 ) 最 新 自考 新 闻 
2 ) 最 新 目 考 动态 
自考 求学 方面 的 信息 
免费 的 成 绩 在 线 查 询 ( 为 了 提高 访问 量 ) 
强大 的 学 员 注 册 系 统 


首页 的 设计 主要 体现 整个 网 站 的 导航 及 以 上 提 到 的 8 大 功能 区 域 ， 并 让 人 从 首页 上 感觉 
出 学 校 的 规模 、 信 誉 等 ， 应 做 到 结构 清晰 、 色 彩 活 泌 、 运 用 Gif 动画 生动 地 表现 服务 内 容 和 
专业 标准 。 关 于 几 个 大 类 的 二 级 首页 也 是 重点 ， 功 能 和 效果 与 首页 相 比 差不多 ， 所 不 同 的 是 
更 简洁 、 更 有 针对 性 。 
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一 6.1.2 ”客户 特别 要 求 

客户 对 自考 教育 中 心 网 站 的 制作 提出 了 以 下 几 点 特别 要 求 。 

( 1 ) 友情 链接 一 定 要 丰富 。 链 接 网 站 的 性 质 一 般 为 国家 管理 机 构 和 组 织 ， 内 容 一 般 围绕 
所 培训 的 课程 相关 知识 ， 如 北大 自考 、 清 华 自考 、 北 邮 成 考 、 北 京 联 合 大 学 等 。 

( 2 ) 在 各 个 页 面 都 要 突出 网 校 的 联系 电话 、 地 址 、 信 箱 等 联系 方式 ， 便 于 学 生 报 名 和 
咨询 。 


(3) 为 了 能 够 随时 更 新 和 添加 网 页 并 厂 省 费用 ， 需 要 提供 强大 的 后 人 管理 系统 ， 工 作 人 





后 期 将 提供 培训 ， 做 到 能 够 动态 地 更 新 网 六 内 容 。 
(4 ) 针对 学 校 的 特色 设计 网 页 布局 、 图 案 、Gif 动 男 、Flash 动 男 、 吸 引 人 的 广告 语 等 。 
设计 要 新 统 ， 并 具有 朝气 、 向 上 和 现代 感 。 


| 6.1.3 网 站 项 目 设计 
通过 上 和 面 的 功能 分 析 ， 设 计 出 来 的 本 章 实 例 网 站 的 首页 如 图 6-]1 所 示 。 
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看 图 6-1 开发 设计 的 自考 教育 网 首页 效果 


pe 网 站 建设 项 目 如 下 。 
(1 ) 采用 国际 域名 : www.zk211.com。 
(2 ) 网 络 磁盘 空间 : 容量 为 106B。 
(3 ) 弹出 式 广 告 : 可 以 把 公司 和 网 站 的 最 新 动态 或 最 新 产品 信息 打 在 上 面 。 
( 4 ) 一 个 为 其 量 身 定做 的 精美 主页 : 主页 就 是 网 校 的 门脸 ， 它 关系 到 公司 的 形象 、 网 
站、 结构 、 广 告 宣 传 、 首 推 产品 信息 等 至 关 重 要 的 方面 ， 一 个 好 的 主页 可 以 留 住 访问 者 。 
( 5) 二 级 主页 数量 : 200 页 左 石 ， 包 括 全 国 各 省 会 城市 信息 发 布 。 
( 6 ) 强大 的 后 合 管理 功能 ,管理 者 通过 后 合 链接 地 址 ， 输 入 用 户 名 和 密码 可 以 登录 后 合 
进行 管理 ， 主 要 有 文章 发 布 和 学 员 管 理 两 个 后 合 管理 功能 。 文 章 发 布 系统 可 以 实现 图 片 、 文 
字 的 编辑 上 传 ， 成 生 的 文章 带 有 访问 次 数 统计 功能 。 
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6.1.4 采用 实用 技术 


由 于 教育 类 网 站 涉及 很 多 功能 ， 因 此 选择 目前 技术 较为 完善 的 ASP 来 编写 。 选 择 不 同 的 
服务 器 技术 来 制作 网 站 的 方法 及 格式 是 不 同 的 ， 下 面 就 对 制作 网 站 所 用 的 各 种 技术 进行 一 个 
EER Ts 

常见 的 动态 网 页 编程 脚本 语言 有 ASP、PHP、JSP 三 种 ， 其 中 ASP JavaScript 是 利用 
JavaScript 语言 格式 编写 的 ，ASP VBScript 是 用 VBScript 语言 格式 编写 的 ， 这 两 种 语言 主要 
体现 在 语言 格式 的 不 同 。 

ASP、PHP、JSP 三 种 不 同 扩 术 的 区 别 如 下 。 

ASP 是 微软 的 产品 ， 是 目前 开发 人 员 用 得 最 多 的 一 种 技术 ， 简 单 易 学 ， 安 装 使 用 方便 。 
COM 组 件 无 限 扩 展 了 ASP 的 能 力 ， 但 同时 继承 了 微软 产品 的 一 员 传 统一 一 只 能 运行 于 微软 的 
服务 器 产品 如 IIS、PWS 产品 上 ， 即 只 能 在 Windows 环境 下 开发 ， 而 且 安 全 性 不 是 很 好 。 推 出 
的 Asp.net 将 (C# 作 为 一 种 面 疝 对 象 语言 ， 性 能 已 得 到 改善 和 提高 。 在 服务 器 扩 术 上 对 应 了 
ASP JavaScript、ASP VBScript、Asp.net C# 及 Asp.net VB4 个 选项 。 

PHP 最 初 于 1994 年 由 Rasmus Lerdorf 开始 提出 并 子 以 实现 ， 在 1995 年 以 Personal 
Home Page Tools 开始 第 一 版 本 。 它 可 以 在 UNIX、Linux、Windows 等 环境 下 工作 ， 运 行 可 
靠 ， 速 度 快 ， 可 移植 性 强 ， 有 民 好 的 安全 性 ， 文 持 大 量 各 类 数据 库 ， 有 丰富 的 函数 库 ， 产 代 
人 码 很 容易 得 到 并 且 是 免费 的 。 但 是 ，PHP 缺乏 规模 支持 ， 其 次 ,缺乏 多 层 结 构 支 持 。 而 且 
PHP 提供 的 数据 库 接 口 不 统一 ， 这 就 使 得 它 不 适合 运用 在 电子 商务 中 。 在 服务 器 扩 术 上 对 应 
了 PHP MySQL 这 个 选项 。 

JSP 是 Sun 公司 推出 的 新 一 代 站 挟 开 发 语言 ， 其 编译 操作 仪 在 对 JSP 页 面 的 第 一 次 请 求 
时 发 生 ， 大 大 提高 运行 速度 并 减少 资源 损耗 。JSP 支持 一 处 编写 随处 运行 ， 还 具有 系统 的 多 
合 平 支 持 ， 强 大 的 可 伸缩 性 ， 多 样 化 和 功能 强大 的 开发 工具 支持 等 特 后 。 

ASP、JSP、PHP 各 个 性 能 比较 如 表 6-1 所 示 。 


表 6-1 ASP、JSP、PHP 性 能 比较 


本 可 匀 大 匀 大 

难 号 程度 简单 

运行 平台 Windows/UNIX/Linux 
扩展 性 绞 好 绞 关 

3 5 

函数 支持 多 较 少 多 

数据 库 支持 多 多 

太 商 支持 鲍 多 

对 xml 的 支持 不 支持 支持 





对 组 件 的 支持 支持 支持 不 支持 
对 分 布 式 的 支持 支持 不 支持 
使 用 程度 较 广 较 广 较 广 
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J 6.1.5 页 面 设计 规划 


在 本 地 设计 计算 机 的 硬盘 上 搭建 网 站 站 点 。 创 建 一 个 主要 文件 来 ， 然 后 在 其 中 再 创建 多 
个 子 文件 夹 ， 最 后 将 文档 分 类 存储 到 相应 的 文件 来 下 。 读 者 可 以 打开 光盘 中 的 素材 ， 看 第 6 
划 的 六 凡 文 档 稍 构 及 文件 夹 结 构 ， 将 要 设计 完成 的 结构 如 图 6-2 所 示 。 
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国 图 6-2 制作 网 站 文件 的 结构 

下 面 从 站 点 规划 的 文件 夹 及 完成 的 页 面 出 发 ， 分 别 对 需要 设计 的 页 面 功能 分 析 如 下 。 
(1 ) 站 所 文件 夹 下 的 18 个 主要 文件 及 功能 分 别 如 下 。 
aboutus.asp: 关于 企业 的 内 容 简介 页 面 。 
baoming.asp: 用 于 学 员 在 线 注册 的 市 表单 的 页 面 。 
cjcx.asp: 成 绩 查 询 主 页 和 面 。 
cjcx.htm: 主页 链接 过 来 的 成 绩 人 三 询 静态 资料 。 

. cjcx_search.asp: 动态 在 线 查 询 结 果 页 。 

| config.asp: 被 相关 的 动态 页 面 调用 ， 用 来 实现 数据 库 连 接 ， 同 时 为 主要 导航 栏目 内 容 


三 设置 信息 。 


czhz.asp: 诚 征 合 作 栏 目 内 容 。 

deal.asp: 删除 数据 库 学 员 资 料 调用 的 动态 编程 。 
fuwu.htm:， 注册 确认 信息 页 面 。 

index.asp: 用 于 实现 整个 教育 网 站 的 首页 页 面 。 
index2.asp: 用 于 各 省 调用 的 二 级 主页 。 
intro.asp: 自考 简介 栏目 页 面 。 
kssd.asp: 考试 书店 栏目 页 面 。 

lxwm.asp: 联系 我 们 栏目 页 面 。 
mzsm.asp: 免责 声明 栏目 页 面 。 
qtks.asp: 奖 助 学 金 栏 目 页 面 。 
zpxx.asp: 招聘 信息 栏目 页 面 。 
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zxkt.asp: 在 线 课 堂 栏 目 页 面 。 

(2 ) admin 文件 夹 放 置 的 是 关于 整个 网 站 的 后 人 台 管 理 文 件 内 容 ， 分 别 包括 了 guides 3 
学 指南 信息 发 布 news 文件 夹 ( 新 闻 信 息 发 布 管理 )、trends ( 动态 信息 发 布 管理 ) 
user ( 用 户 信息 管理 ) 4 个 子 文件 来 。 这 个 模块 是 教育 网 站 的 难点 和 重 挟 ， 0 
一 万 中 进行 介绍 。 

3 ) bbs 论坛 文件 夹 是 一 个 独立 的 运行 系统 ， 在 本 章 不 做 具体 的 介绍 。 
Connections 文件 夹 里 是 建立 数据 库 时 生成 的 连接 代码 。 ew 
css 是 网 页 文本 样式 文件 夹 ， 通 过 调用 这 里 的 网 页 样式 达到 所 有 的 网 页 效果 一 致 。 Wi /7 
guides 文件 夹 里 是 自考 指南 信息 调用 的 主要 模块 页 面 。 ms 
images 文件 夹 用 来 放置 网 页 的 图 片 。 
introduction 文件 夹 有 两 个 被 主页 调用 的 二 级 相关 页 面 。 
mdb 文件 夹 里 放置 数据 库 文件 。 
0 ) news 文件 夹 放 置 新 闻 信 息 调 用 的 主要 模块 页 面 。 
] ) sfcz 文件 夹 里 放置 的 是 学 员 在 线 报名 的 相关 网 页 。 
2 ) tests 文件 夹 里 是 求学 指南 信息 调用 的 主要 模块 页 面 。 

3 ) trends 文件 夹 里 是 动态 指南 信息 调用 的 主要 模块 页 面 。 

re ， 该 网 站 总 共 由 近 200 个 页 面 组 成 ， 主 要 是 在 bbs 论坛 的 开发 设计 相 
后 合 管理 的 程序 设计 上 。 


6.2 ”数据库 设计 


) 
) 
) 
) 
) 
) 


全 二 所 SO OO OO Ol 人 


教育 网 站 所 涉及 的 数据 库 很 庞大 ， 单 从 前 面 的 设计 功能 上 就 可 以 看 出 。 本 实例 一 共 需 要 
3 个 Access 数据 库 ， 一 个 是 用 来 实现 网 上 在 线 注 册 、 存 储 学 员 信 息 、 新 闻 、 动 态 等 功能 页 面 
需 调 用 的 zikao.mdb， 一 个 是 用 来 放置 现 有 学 员 成 绩 数 据 用 的 list.mdb ( 用 来 查询 成 绩 )， 兄 


一 个 是 用 在 bbs 论坛 的 数据 库 bbs.mdb。 在 这 里 主要 介绍 zikao.mdb 数据 库 ， 在 数据 库 中 建 
立 7 个 不 同 的 数据 表 ， 如 图 6-3 所 示 。 


11 山 示 者 





博 壳 
项 谋 囊 现 胃 固 | 画 量 忆 


和 图 6-3 建立 的 zikao.mdb 数据 库 
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对 各 数据 表 的 功能 分 析 如 下 。 


Cub 


习 坛 域 坦 已 加 器 
本息 名 称 数据 类型 孔明 了 
中 | 好 域 ID 自动 嵩 号 
趣 堪 吉 竺 训 李 bs 
字 昭 压 怪 


) 地 域 表 是 存储 全 国 各 省 区 域 | 至 
代码 的 相关 信息 表 ， 设 计 的 数据 表 如 





6 一 4 所 示 。 李 其 癌 称 最 其 避 到 全 个 地 等 [外 拖 至 列 )， 皖 


民 1) 避 可 枉 署 有 美 字 忘 震 舍 的 局 助 。 





四 图 6-4 地 域 数 据 表 


可 表 6-2 ”地 域 数据 设计 表 


| 设计 后 设置 主键 ， 并 输入 各 大 城市 信息 ， 一 共 分 为 33 个 城市 ， 如 图 6-5 所 示 。 


| 国 洁 声 村 所 男 咒 


地 域 当 特 -| 瞩 如 托 蒋 语 - 下 
市 


| 
2 上 得 市 


lg 
< 





二 区 ; H 随 1 机 三 | hl | 协 这 


图 6-5 输入 城市 信息 








四 动 才 要 = 加 到 | 
| 有 副 据 灌 型 说 明 二 
A 自动 妨 屿 
水 六 本 
动态 出 由 六 二 


: ) 动态 表 是 用 来 存储 自 |- 先 名 9 
| 页 及 各 省 动态 信息 的 表 。 Ee | 素 规 一 网 








李 队 不 小 长 星 组 
、 、 [1 5 [1 | EF 
设计 了 “动态 ID 动态 标 
是 由 号 (tl 二 中 A 出 处 )) tl 二 JS 态 2 a 而 | 元 重复， 
周明 和 娃 刘 局 专 乏 最 长 可 副 出 个 地 从 | 伺 后 蛮 始 1， 按 
入 )) 、 it 动态 态 图 a )) 、 it 动态 态 度 记 对 齐 量规 san 


、“ 动 态 地 域 ” 等 7 sw。 
如 图 6 一 6 所 示 。 


量 图 6-6 建立 的 动态 表 
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表 6-3 动态 数据 设计 表 

则 由 于 内 容 比较 多 ， 所 以 
太 内 安 太 内 突 \ 长 日 

) 区 号 表 主 要 用 来 区 分 城市 的 代码 ， 以 方便 在 注册 及 编程 时 能 够 调用 区 分 。 主 要 设计 

ee we 个 字段 名 称 ， 根 据 需 要 在 数据 表 中 加 入 相应 的 省 会 

信息 ， 如 图 Gy 所 示 。 


字段 圳 称 ee 说 明 = 


图 6-7 建立 的 区 号 表 
) 新 闻 表 是 用 来 存储 首页 及 各 省 的 新 闻 信 息 表 ， 设 计 同 动态 表 。 主 要 设计 了 “新 闻 
人 
字段 名 称 ， 如 图 6-8 所 示 。 


图 新 闻 表 








数据 类 型 说 明 <^ 
自动 编号 


常规 | 童 阅 

享 和 大 小 长 2 

新 值 递增 

格式 

过 引 有 (无 重复 ) 

二 字段 名 称 最 长 可 到 64 个 字符 (包括 空格 )。 按 
文本 对 等 规 Fl 链 可 坦 看 有 关 字段 名 称 的 帮助 。 











图 6-8 建立 的 新 闻 表 


175 


( 5 ) 参照 新 闻 表 ， 分 别 再 设计 “应 试 表 ” 和 “指南 表 ` ， 所 设计 的 字段 同 新 闻 表 一 样 。 
其 中 “应 试 表 ” 是 用 来 存储 应 试 的 信息 表 ,“ 指 商 表 ”是 用 来 存储 指南 信息 的 表 ， 具 体 不 再 
介绍 


| mo 


A 


资料 表 是 用 来 存储 学 员 信 息 EN 
本 | wa | op e 
交 表 单 的 字段 内 容 一 样 ， 这 里 依据 网 | 和 
校 所 要 知道 的 学 员 信息 设计 了 一 一 二 





“UserID”( 用户 ID )、“province” (所 | 长 一 
在 省 )、 ” bk_city”( 所 在 城市 )、 Er 一 一 权 TY 


| a (总 字 人 “ideard” 《身份 证 ) 
| 等 39 个 字段 名 称 ， 具 体 的 请 读者 打开 

| ss 务 料 表 进 行 分 析 。 设 计 的 资 

料 表 如 图 6-9 所 示 。 国 图 6-9 设计 的 资料 表 


数据 库 的 设计 主要 从 功能 页 面 所 需要 的 存储 元 素 出 发 ， 上 向 设计 的 资料 表 属 于 较 复 杂 世 
数据 表 ， 可 以 应 用 于 大 型 网 站 的 会 员 注 册 。 


6.3 设计 教育 网 首页 


上 自考 教育 网 的 首页 主要 EU 个 动态 页 面 ， 并 且 包 合 了 
数据 库 连 接 调 用 的 页 和 面 config.asp。 下 面 就 按 页 和 面 分 别 介 绍 组 成 首页 的 动态 设计 。 


6.3.1 数据 库 连 接 
config.asp 打开 后 显示 的 代码 如 图 6-10 所 示 。 


DW 交 件 时 篇 三 时) 查看 I 轨 ” 手 入 I 妊 改 0 格式 大 击 舍 人 E) 站 点 [5 春日 全 二 是 各 
| | | pit 






| | 







疏 甩 上诉 妇 | 训 it Es i 厂 妆 。 训 时 祖国 闭 坦 | 让 六 一- 款 题 ， 





ry Ea 旱 幅 : [有 T breariti t I 

Wl Mr hE=" WESCRIPT™ CoDeT heE= dt [ 
= ” 刁 要 在 说 再 面 上 妾 用 直击 其 蜘 : 

种 报 阵 滨 1 wv 1. 记 这 启 定 忻 划 了 归 一 个 由 点 s 
"ES" rerver, nappatht” /mdb/ zikao. wdb” he" :Defwulibir=; [RIVER= [Microsoft Access 2 | 2 
.mdbi] -* 3， 请 重 知 点 的 到 未 用 呈 国 。 

EUWEI- CEentenbject (" POLE CONNECTTON" 4 捧 加 车 由] 王 虹 开 吏 区 记 芝 秽 。 
rE 










ToTmst E= 
briver 【 
Ey- 





避 可 | 加 lEIs|| 总 让 | 对 叶 寺 


“ 知 区 


EL 特 套 体 中 广 2H2) | 





[如 mL.| | 将 于 是 | 现 = 疯 | 元 “有 了 和 四 加 标题 人 | 
林 桓 吕 | 无 二 | 往 捷 司 | | 集 可 。 自 际 内 
[区 本 生涯 _ 虽 列表 二 日 





(ET GE 


国 图 6-10 设置 数据 库 连 接 并 设置 栏目 
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对 本 连接 的 程序 说 明 如 下 。 


<YQWLANGUAGE="VBSCRIPT"” CODEPAGE="936"%> 

/使 用 VBSCRIPT 语言 编写 的 程序 

<% 

/以 下 为 数据 库 连 接 代码 

connstr="DBQ="+server.mappath("/mdb/zikao.mdb")+";DefaultDir=; DRIVER={Microsoft Access 
Driver (*.mdb)};" 

/设置 为 站 点 文件 夹 Andb/zikao.mdb 路 径 访 问 ， 驱 动 为 Access 数据 库 

set conn=server.createobject("ADODB.CONNECTION") 

conn.open connstr 

/打开 数据 库 

20> 

<% 

lf session("user")="admin" then 

navigation="<a hre 人 f=/index.asp 人 > 首 页 </a> 上 <a hre 人 vintro.asp'> 自 考 简 介 </a> 上 <a href='/news/ | 
news listasp> 自 考 新 闻 </a> |! <a href='/euides/guides listasp 福 报考 指南 </a> ! <a href='"/sfzc/bao 
ming.asp' target=' blank> 网 上 报名 </a> <a href='zxkt.asp 人 > 在 线 课 党 </a> | <a href='kssd.asp 作 考试 书 
店 </a> 1! <a href='/bbs/index.asp' target=' blank'> 考 试 论坛 </a> 上 <a href='czhz.asp> 诚 征 合作 </a> 
<a href='qtks.asp'> 奖 助学金 </a> | <a href='/admin/admin.asp' target=' blank> 网 站 管理 </a>" 

/判断 登录 使 用 者 为 admin 则 显示 相应 的 导航 栏目 ， 主 要 是 可 以 显示 “网 站 管理 栏目 ” 

else 

navigation="<a href='/index.asp 人 > 首 页 </a> | <a hre 人 vintro.asp> 自 考 简 介 </a> ! <a href='/news/ 
news listasp> 自考 新 闻 </a> | <a hre 人 Vsguides/guides listasp> 报 考 指 南 </a> | <a hre 全 /sfzc/bao 
ming.asp' target=' blank> 网 上 报名 </a> i <a href='zxkt.asp> 在 线 课堂 </a> | <a href='kssd.asp 人 > 考试 书 
店 </a> i <a hre 人 /bbs/index.asp' target=' blank'> 考 试 论坛 </a> ! <a href='czhz.asp> 诚 征 合 作 </a> 
<a href='qtks.asp'> 奖 助学金 </a>" 




















end 1f 
/如 果 不 是 则 显示 的 导航 栏目 
900> 


6.3.2 ”设计 网 站 首页 


首页 的 美工 在 设计 切割 后 统一 导入 到 images 文件 夹 下 ， 在 这 里 按 首页 的 自 上 而 下 ， 从 
左 往 右 的 顺序 介绍 各 功能 模块 ， 这 样 可 以 让 读者 更 轻松 掌握 该 功能 的 设计 与 实现 。 建 议 读者 
在 Dreamweaver CS6 中 打开 该 页 面 ， 跟 随 上 而 的 步骤 一 起 进行 分 析 。 
下 面 由 功能 出 发 分 别 分 析 和 设计 各 功能 模块 。 
(1 ) 打开 首页 后 一 开始 就 是 一 段 ASP 代码 ， 主 要 功能 是 调用 config.asp， 并 打开 相应 的 
数据 库 进 行 Sq1 查询， 一般 的 ASP 动态 网 页 的 编程 都 是 这 么 设置 的 ， 代 码 分 析 如 下 。 
<!-- 贡 nclude file="/config.asp"-->// 调 用 config.asp 
<% 
set rs=server.CreateObject("ADODB .Recordset") 
sql="select* from 新 闻 表 where 新 闻 地 域 =' 全 国 ' order by 新 闻 ID DESC" 


rs.open sql,conn,1,1// 通 过 狐 闻 地 域 及 新 闻 ID 打开 全 国 的 新 闻 查 询 表 
set rs guilde=server.CreateObject("ADODB.Recordset") 
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Sqlguide="select * from 指南 表 where 指南 地 域 =' 全 国 ' order by 指南 ID DESC" 
rs_guide.open sqlguide,conn,1,1/ 通 过 指 丙 地 域 及 指南 的 ID 打开 全 国 的 指南 表 
set rs test=server.CreateObject("ADODB.Recordset") 
Sql test="select * from 动态 表 where 动态 地 域 =' 全 国 ' order by 动态 ID DESC" 
rs_test.open Sql test,conn,1,1// 通 过 动态 地 域 及 动态 ID 打开 全 国 的 指南 表 
set rs area=server.CreateObject("ADODB.Recordset") 
sql area="select * from 地 域 表 order by 地 域 ID" 
rs area.open Sql area,conn,!1,!l 
0%0> 


(2 ) 接 下 来 分 析 首 页 上 的 时 间 显 示 功 能 ， 如 图 6-11 所 示 。 很 显然 这 是 一 个 从 入 式 的 小 
UavaScript 程序 。 在 动态 网 页 上 经 常 散 入 一 些 JavaScript 程序 或 者 是 Applet 程序 实现 如 这 里 
的 时 间 日 期 显示 、 倒 计时 、 访 问 量 统计 等 一 些 功 能 。 





Es = 夯 ieFzaro 芋 tt 工 R 让 工 相 到 由 左权 及 卫 吾 呈 疡 开 
1 宣 忻 亩 ) 总 机 让 i ” 齐 看 亨 ) 牧 村 必 ) 工具 在 刷 册 让 1 


加 国 的 ae 翩 em 如 全 


有 国内 化 训 院 长 汇总 ，21/ 件 祭 夫 向 冯 


-本 二 一 
Be 
Lae 





图 6-11 首页 上 的 时 间 显 示 
此 段 程序 分 析 如 下 。 


<P align=left class="style2"> 今天 是 :&nbsp; 
<SCRIPT language=JavaScript> 
// 提 示 骨 入 JavaScript 程序 
dayOb] = new Date(); 
monthStr = dayOb]j.get Month() + 1; 
if (dayOb]j.getYear()<99) year2000=2000+dayOb]j.getYear(); 
else 
year2000=dayObj.getYear(); 
document.write(year2000+" 年 "+monthStr+" 月 "+dayObj.getDateO+" 日 "+" "); 
if (dayObj.getDay()==1) document.write(" 性 期 一 "); 
if (dayObj.getDay()==2) document.write(" 性 期 二 "); 
if (dayObj.getDay()==3) document.write(" 性 期 三 "); 
这 (dayObj.getDayO==4) document.write(" 星 期 四 "); 
if (dayObj.getDay()==5) document.write(" 性 期 五 "); 
if (dayObj.getDay()==6) document.write(" 性 期 六 "); 
if (dayObj.getDay()==0) document.write(" 性 期 日 "); 
</SCRIPT> 
/显示 网 页 时 间 与 当日 时 间 一 致 ， 细 化 到 星期 几 的 程序 代码 
<SCRIPT language=JavaScript> 
document.write(" 更 新 时 间 : "+ document.lastModified + "") 
</ 人 /SCRIPT> 
// 榜 入 的 更 新 时 间 日 期 
</P> 
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时 间 显 示 下 方 是 制作 的 Gif 动 男 ， 在 这 里 将 不 进行 介绍 ， 可 以 用 Flash 开发 Banner 广告 
条 。 

( 3 ) 导航 条 放置 的 位 置 直接 用 ASP 的 代码 <%=navigation%> 实 现 ， 如 图 6-12 所 示 。 由 于 
在 config.asp 页 向 中 定义 了 《<%=navigation%> 的 内 容 ， 所 以 可 以 很 方便 地 在 这 里 实现 ， 这 样 
的 操作 也 是 为 了 方便 网 站 栏目 的 更 改 ， 当 网 站 需要 变更 一 个 栏目 ， 而 如 果 不 是 指定 在 同一 
文件 蜂 ， 那 就 需要 更 改 所 有 的 网 页 ， 工 作 量 会 变 得 很 大 。 


DW 六 首 夯 访 加 是) 要 看 各 鼻 六 [17 博 政 借阅 起 冲击 芝山 基点 站 1 禄 日 恒 ) | 
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大 图 6-12 调用 导航 条 的 命令 


( 4 ) 接着 介绍 的 是 用 户 注 
册 系 统 ， 完 成 的 效果 如 网 6--13 
所 示 。 其 中 的 一 个 ASP 就 是 动 
态 显 示 登 录用 户 的 名 称 功能 。 





国 图 6-13 用 户 注册 系统 
该 段 的 代码 分 析 如 下 ， 其 中 加 黑 加 粗 部 分 为 ASP 编程 代码 。 


<form name="form1l" method="post"” action="bbs/loginok.asp"><tr> // 在 输入 信息 后 单 击 登 录 按 钮 提 








交 到 bbs/loginok.asp 页 面 进行 处 理 
<td height="20" colspan="2" bgcolor="#D1EEF”7" class="css"> <font color="#FF3300"> 
<% 
if session("'xxskybbsuser"')<>"" then 
response.Write(session("'xxskybbsuser"')) 


else 
response.Write(" 游 客 ") 
end if 


%>// 如 果 是 注册 的 用 户 登 录 在 这 里 显示 用 户 名 ， 如 果 没 有 注册 则 显示 为 游客 
</font><font color="1A3D05">， 欢 迎 你 ! </font></td> 
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</tr> 

<tr> 

<td height="20" align="right" bgcolor="#D1EEF7" class="css"> 用 户 名 : 

</td> 

<td height="20" bgcolor="#D1EEF7" class="css"><Input name="name" type="text" class="input2" 
size="13"></td> 

</tr> 

<tr> 

<td height="20" align="right" bgcolor="#D1EEF7" class="css"> 密 ”人 ’: 

</td> 

<td height="20" bgcolor="#D1EEF’”7" class="css"><input name="pass" type="password" class="input2" 
slze="13"><input name="come" type="hidden" value="index"></td> 

</tr> 

<tr> 

<td height="20" align="right" bgcolor="#D1EEF7" class="css"> 会 员 类 型 : </td> 

<td bgcolor="#D1EEF7" class="css"> 

<select name="select"> 

<option selected> 普 通 会 员 </option> 

<option> 收 费 会 员 </option> 

</select> 

</td> 

</tr> 

<tr> 

<td height="20" align="right" bgcolor="#DI1IEEF7" class="css"><input name="imageField" 
type="image" src="/images/index login bt.gif” width=" 37" height="21" border="0"></td> 

<td align="right" bgcolor="#D1EEF7" Qclass="css"><a href 人 ="/bbs/reguserl.asp"> 新 会 员 注 
册 .…</a>&nbsp;&nbsp;</td> 


</tr></form> 
(5 ) 接 下 来 分 析 新 闻 显 示 模 块 ， 设 计 发 布 后 的 新 闻 显 示 模 块 如 图 6-14 所 示 。 
一 最 新 新 闻 : 
= 教育 部 考试 中 心 : 和 首 省 无 椒 前 自考 统考 试题 
“” 目 考生 考研 人 数 越 来 越过 


"民办 教育 收费 如 条 管 理 ? 网 上 将 征求 社会 意见 
"教育 部 考试 中 心 : 高 教 党 内 立项 考试 明年 将 耶 消 
" 京 津 塘 高 速 公 蹄 本 堵车 导致 52 名 学 生 误 了 自考 

" 追求 成 为 香 合 型 六 十 在 校 太 学 生 忙 其 加 自考 

" 高 等 教育 自学 考试 的 十 志 怖 点 和 惰 热 

“北京 目 著 外 起 考生 近 作 成 外 国 留 学生 首次 从 加 
"20D05 年 有 32 门 译 程 圭 斌 使 用 新 辆 的 志 纲 和 教材 


图 6-14 ”新闻 显 示 模 块 


相应 的 代码 分 析 如 下 。 


<table width="95%" border="0" cellspacing="0" cellpadding="2"> 
<% 

if rs.recordcount>10 then 

0%0> 

<% for 二 1 to 10 %>// 显 示 数 据 库 中 第 1 到 第 9 条 新 闻 信 息 
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<tr> 

<td width="96%"> 。<a hre 伟 "newsmnews content.asp?news id=<%= rs(" 新 闻 ID") %>" target="_ 
blank"><%= rs(" 狐 闻 标 题 ")%>// 显 示 狐 闻 标 题 

</a></td> 

</tr> 

<% 


if rs.eof=1 then 





| 
| 
| 


exlt for 

else 

rs.MOovenext 

end 1f 

next 

else 

for 1=1 to rs.recordcount 

%>// 按 9 行 分 别 显 示 9 条 信息 标题 

<tr> 

<td> 。<a href—="news/news content.asp?2news id=<%= rs(" 新 闻 ID") %>" target=" blank"><%= TSs(" 新 
闻 标 题 ")%>// 单 击 标题 传递 新闻 标题 ID 号 并 链接 到 news/news_content.asp 页 面 进行 显示 

</a></td> 

</tr> 

<% 


if rs.eof=1 then 











exit for 
else 


rs.Movenext 





end 1f 

next 

end 1f 

%>// 分 行 结束 

</table> 

( 6 ) 求学 指南 和 自考 动态 同 新 闻 模 块 ， 这 里 就 不 天 介绍 ， 具 体 的 请 分 析 源 代码 。 

Ee 中 国 自考 教育 网 - Hicrosoft Internet Exzplorer 加 回国 
; 文件 @ 编辑 EF) 查看 @ 收藏 上) 工具 (I) 帮助 


FE - 园 - 因 四 全 万 上 到 类 关 对 # 加 | 内- 
; 地 址 @) | 罩 http://127.0.0.1 vv 国 #5 i: ”:@smat 国 
ES 学 习 交 流 “在线 答 络 。” ”在 线 测 斌 
人 才 中 心 : 
成 绩 查 询 。 ”证 书 查 询 。 ”企业 招聘 求职 信息 








(7 ) 各 省 自考 模块 显示 ， 
这 里 的 编程 是 一 个 难点 ， 设 计 
发 布 后 显示 的 效果 如 图 6-15 
所 示 。 


全 合 作 院 校 推荐 : 








多 Internet 


是 图 6-15 各 省 自考 模块 
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ASP 功能 代码 如 下 。 


<table width="96%" height="60" border="0" align="center" cellpadding="16" cellspacing="0"> 
<% 

ifrs area.recordcount>17 then 

%>// 如 果 显 示 的 记录 和 集 大 于 17 则 执行 下 面 的 ASP 程序 

<tr bgcolor="#D1EEF”7"> 

<td width="54%" valign="top" class="css"> 





<% 

for 1=1 to 17 

0%0> 

<ahre 仁 "index2.asp?area=<9%=ITS area(" 地 域名 称 ")%>"><%=rs area(" 地 域名 称 ")%></a><br> 
<% 


ifrs area.eof=1 then 
exlt for 
else 


rs area.movenext 








end 1f 

next 

%>// 按 16 行 显示 各 省 名 称 

</td> 

<td width="46%" valign="top" class="cSS"> 
<% 


for 1=18 to rs area.recordcount 

%>// 第 18 个 换 到 第 二 排 

<a href="index2.asp?area=<%=rs_area(" 地 域名 称 ")%>"><%=rs_area(" 地 域名 称 ")%>// 显 示 相 应 的 名 
称 并 设置 指 问 链 接 </a><br> 

<% 


ifrs area.eof=1] then 





exlt for 
else 
rs area.movenext 
end 1f 
next 
200> 
</td> 
</tr> 
<% 
end 1f 
if rs area.recordcount<18 then 
和 > 
<tr bgcolor="#D1EEF”7"> 
<td width="54%" valign="top" class="css"> 
<%for 1=1 to rs area.recordcount 
2%0> 
<ahre 全 "index2.asp?area=<9%=TS area(" 地 域名 称 ")%>"><%=rs area(" 地 域名 称 ")%></a><br> 
<% 
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ifrs area.eof=1] then 
exlt for 
else 
rs area.movenext 
end 1f 
next 
0%0> 
</td> 
<td width="46%" valign="top" class="css">&nbsp;</td> 
</tr> 
<% end if %>// 程 序 结束 
</table> 


( 8) 其 他 的 都 是 一 些 静 态 页 面 的 简单 链接 ， 整 体 效 果 如 图 6-16 所 示 。 


| Dw 直 圳 闻 i 恼 酉 症 ) 看 看 十 缁 大王 由 槛 硬 由 起 如 曾 过 让 i 帆 各 珊 ) 看 牢 放 | 本 区 于 ) 


相国 自 沁 胡 网 


5 放生 心情 坟 : 国 . 


-EE 二 有 三 雪 雪 村 丁克 
HL) 天 = 由 搜 Q “= 和 加 

| 三 = 单元 财 。 永 平民 ) 局 中 对 卉 。 二 二 曾 焉 租 生 心中 届时 蝴蝶 性] [| retaes 

EE 回 下 。 曙 下 fL) 隔 以 志高 晰 | 1 部 本 古 闻 口 ] 























国 图 6-16 在 Dreamweaver CS6 的 效果 


6.4 新 闻 发 布 系统 


新 闻 发 布 后 必须 让 网 站 的 访问 者 在 首页 上 看 到 后 合 发 布 的 新 闻 ， 在 本 节 中 主要 制作 新 闻 
标题 浏览 页 news_list.asp 和 动态 细节 页 面 news_content.asp。 教 育 网 站 的 首页 index.asp 是 
由 很 多 功能 部 分 组 成 的 ， 新 闻 发 布 系统 的 新 闻 标 题 浏 览 页 一 般 就 峙 套 在 首页 上 ， 所 以 
index.asp 页 面 用 来 显示 后 合 发 布 的 新 闻 标 题 。news_1ist.asp 是 单 击 index.asp 上 和 面 的 新 闻 标 
题 所 打开 的 数据 库 中 所 有 的 新 闻 标 题 页 面 ， 而 news_content.asp 又 是 单 击 news_list.asp 上 
面 的 新 闻 标 题 所 打开 的 新 闻 详 细 内 容 页 面 。 


6.4.1 新 闻 标 题 浏览 


news 文件 夹 下 的 news_list.asp 页 面 主 要 的 功能 是 在 读 取 数 据 库 中 新 闻 和 的 数据 标题 
后 ， 显 示 在 网 页 中 并 进行 分 栏 分 页 。 设 计 的 核心 部 分 如 图 6-17 所 示 。 
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恒 图 6-17 自考 新 闻 标题 显示 设计 效果 
ASP 部 分 代码 设计 如 下 。 


<1--#include file="../config.asp"-->// 调 用 config.asp 文件 建立 数据 库 连 接 
<% 
set rs=server.createobject("adodb.recordset") 
sgl="select * from 新 闻 表 order by 新 闻 ID DESC" 
rs.open sql,conn,1,1// 设 置 数 据 库 查 询 方式 
pagesize=25 
if request("page")="" or request("page")<=0 then 
page=1 
else 
page=request("page") 
end 1f 
recordall=rs.recordcount 
if recordall<>0 then 
RS.PageSize = Cint(pagesize) 
pageall=INT(recordall / pagesize * -1 )*-1 
therecord=recordall-((page-1)*pagesize) 
rs.absolutepage=ClInt(page) 
end 让 /这 一 段 程序 是 实现 新 闻 分 页 功能 的 ， 设 置 每 页 显示 的 信息 为 25 条 
0%0> 


新 闻 标 题 显 示 代码 如 下 。 
<table width="95%" border="0" cellspacing="0" cellpadding="3"> 
<% 
if rs.recordcount<>0 then 
for 1=1 to pagesize 
if rs.eof then 
exXlt for 
end 1f 
0%0> 
<tr> 























<td colspan="S5" 
<%if i mod 2 then%>bgcolor="#D1EEF7"<%end if%%>>// 让 新 闻 每 隔 一 行 显示 不 同 的 背景 闫 色 

















184 


<a href="/news/news _ content.asp?news id=<%= TS(0" 狐 闻 ID") %>" target=" blank">。<%=rs(" 狐 闻 标 
题 ")%></a></td>/ 显 示 新 闻 标 题 ， 并 设置 通过 新 闻 ID 链接 到 news_content.asp 页 面 

</tr> 

<% 


rs.Movenext 





next 

end 1f 

0%> 

<tr bgcolor="#E0EOEO"> 

<td width="209%6"> 第 <%=page%> 页 / 共 <%=pageall%> 页 /显示 一 共有 几 页 ， 当 前 页 是 第 几 页 </td> 

<td width="20%"> <%if Cint(page-])<=0 then 

response.write "第 一 页 " 

else%> <a hre 仁 "news list.asp?page=1"> 第 一 页 </a> <%end if06> </td>/ 如 果 查 询 结果 多 于 一 页 则 显 
未 “第 一 页 ”并 设置 链接 

<td width="20%"> <%lif Cint(page-1)<=0 then ~ 

response.write "上 一 页 " 

else%> <a hre 人 "news list.asp?page=<%=page-1%>"> 上 一 页 </a> /如 果 查 询 结果 有 上 一 页 则 显示 = 
“上 一 页 ”并 设置 链接 

<%end lfyo> </td> 

<td width="20%"> <%lf Cint(paget+l)>Cint(pageall) then 

response.write "下 一 页 " 

else%> <a href="news list.asp?page=<%=paget+1%>"> 下 一 页 </a> /如 果 碍 询 结果 还 有 下 页 则 显示 
“下 一 页 ”并 设置 链接 

<%end lfyo> </td> 

<td width="20%"> <%lf Cint(page+l)>Cint(pageall then 

response.write " 尾 页 " 

else%> <a hre 全 "news list.asp?page=<%=pageall%>"> 尾 页 </a> /如 果 查 询 结果 为 最 后 一 页 则 显示 
66 尾 页 39? 

<%end lfyo> </td> 

</tr> 

</table> 


在 这 里 特别 提出 ， 在 Dreamweaver CS6 中 分 页 功能 可 以 通过 执行 菜单 栏 的 【插入 】 一 
【 应 用 程序 对 象 】 一 【 记录 集 分 页 】 至 下 一 级 的 菜单 命令 ， 完 成 上 面 提 到 的 记录 和 集 分 页 编程 
TE 


6.4.2 ”新 闻 内 容 显 示 























接 下 来 分 析 news_content.asp， 
这 个 页 面 用 来 显示 新 闻 的 详细 内 容 ， 
即 单 击 index.asp 或 者 是 news_list. 
asp 页 面 新 闻 标 题 能 够 链接 到 的 页 
面 ， 制 作 的 页 面 如 几 6-18 所 示 。 


让 
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| ER dd 恒 | 也 下 


量 图 6-18 设计 完成 的 news_content.asp 页 面 
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该 页 面 完成 的 代码 如 下 ， 其 中 加 入 了 说 明 。 


<!--#include file="../config.asp"-->// 调 用 config.asp 建立 数据 库 连 接 
<% 

news 1d=request("news 1d") 

set rs=server.createobject("adodb.recordset") 

sql="select * from 新 闻 表 where 新 闻 ID="&news id 

rs.open Sql,conn,1 ,1 

%>// 通 过 新 闻 ID 使 用 sql 但 询 打开 狐 闻 表 

<html> 

<head> 

<title> 中 国 目 考 教育 网 </title> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<link href="/css/css.css" rel="stylesheet" type="text/css"> 

</head> 


<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> 





<table width="780" border="0" align="center" cellpadding="0" cellspacing="0"> 

<tr> 

<td height="27" colspan="5" bgcolor="#1AA9D7"><div align="center" class="css"> 中 目 考 教 
育 网 </div></td> 

</tr> 

</table> 

<table width="780" border="0" align="center" cellpadding="0" cellspacing="0"> 

<tI> 

<td><img src="/images/index 02.gif" width="780" height="83" alt=""></td> 

</tr> 

</table> 

<table width="780" border="0" align="center" cellpadding="3" cellspacing="0"> 

<tI> 

<td bgcolor="#1AA9D”7"> <span class="css"><a href="/index.asp"> 首 页 </a> | <a href="/introd 
uction/intro.asp"> 日 考 简 介 </a> 

| <a hre 仁 "newsmmnews list.asp"> 自 考 新 闻 </a> | <a hre 伍 "/euides/guides list.asp"> 报 考 指 南 </a> 
上 网 上 报名 上 在 线 课堂 | 考试 书店 ! <a href="/bbs/index.asp" target=" blank"> 考 试 论坛 </a> 
| 诚 征 合作 | 其 他 考试 </span></td> 

</tr> 

</table> 

<table width="780" border="0" align="center" cellpadding="0" cellspacing="0"> 

<tI> 

<td background="/images/index 07.g1f"><1mg src="/images/index 07.gif" width="174" 
height="26"></td> 

</tr> 

</table> 

<table width="780" height="600" border="0" align="center" cellpadding="0" cellspacing="0"> 

<tr> 

<td width="111" align="right" valign="top"><br> 

<table width="60%" border="0" cellspacing="0" cellpadding="0"> 

<tI> 
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<td width="24"><lmg src="/images/spacer.gif" width="1" height="1"></td> 

<td width="19">é&nbsp;</td> 

<td width="41" rowspan="2" align="center" valign="top"><table width="100%" border="0" cells 
pacing="0" cellpaddinge="12"> 

<tr> 

<td width="36" height="0" rowspan="2" align="center" valign="middle" bgcolor="#D1EEF7"><p 
class='"bigfont"> 目 </p> 

<p class="bigfont"> 考 </p> | 
<p class='"bigfont"> 新 </p> 本 和 =: 
<p class="bigfont"> 闻 </p> 

</td> 

</tr> 

</table></td> 

</tr> 

<tr> 

<td height="120" valign="top"><1img src="/images/news01.gif" width="45" height="301"></td> 

<td>&nbsp;</td> 

</tr> 

</table></td> 

<td width="669" align="center" valign="top"><table width="95%" border="0" cellspacing="0" cellpa 
dding="8"> 

<tr> 

<td height="1"><1mg src="/images/spacer.gif" width="1" height="1"></td> 

</tr> 

<tr> 

<td align="left" class="content"><table width="100%" border="0" cellspacing="0" cellpadding="0"> 

<tr> 

<td width="78%" class="font14px"><%=rs(" 狐 闻 标 题 ")%></td>// 显 示 狐 闻 标 题 

<td width="22%" align="right"> 新 闻 区 域 ，<%=rs(" 新 闻 地 域 ")%></td>// 显 示 新 闻 区 域 

</tr> 








<tr> 

<td><font color="#666666"><%=rs(" 新 闻 日 期 ")%> (<%=rs(" 新 闻 出 处 )%> ) </font></td>// 显 示 新 
闻 日 期 及 出 处 

<td>&nbsp;</td> 

</tr> 

</table></td> 

</tr> 

<tr> 

<td valign="top" class="content"><%=replace(replace((rs(" 狐 闻 内 容 ")),chr(10),"<br>"),chr(32),"&inbsp;") 
%></td>/ 显 示 新 闻 内 容 ， 并 设置 新 闻 内 容 的 分 段 格式 

</tr> 

<tr> 

<td>&nbsp;</td> 

</tr> 

</table></td> 

</tr> 


</table> 





187 


188 


<table width="780" border="0" align="center" cellpadding="2" cellspacing="0"> 

<tr> 

<td align="center" background="/images/index 35.gif'> 首 页 上 关于 我 们 |! 联系 方式 上 网 上 报 
名 上 招聘 信息 </td> 

</tr> 

</table> 

<table width="780" border="0" align="center" cellpadding="3" cellspacing="0"> 

<tr> 

<td align="center" bgcolor="#1AA9D7"> 知 识 改 变 命运 ， 日 学 造 束 人 才 ! </td> 

</tr> 

</table> 

</body> 

</html> 

<% 

rs.close 

set rs=nothing 

conn.close 

set conn=nothing 

%>// 关 闭 并 清空 记录 集 


本 小 市 是 新 闻 系 统 中 新 闻 疙 细 广 页 的 制作 ， 同 样 可 以 应 用 于 动态 指南 等 细 太 页 动 态 显 
示 功 能 系统 的 设计 。 


6.4.3 新闻 管理 后 台 


新 闻 系 统 的 特 氮 就 是 其 具有 最 新 性 ， 新 闻 需 要 不 断 更 新 ， 它 能 让 浏览 者 感受 到 企业 的 活 
力 。 如 果 一 Pe ne 了 更 新 ， 那 就 不 叫 新 闻 了 ， 所 以 新 闻 系 统 需要 设计 后 
全 管理 的 功能 ,1 管理 者 可 以 进入 后 合 根据 需要 自行 管理 和 发 布 新 闻 。 

人 
中 news 文件 下 的 news_admin.asp、news_add. J news_modify.asp、news_update.asp 这 4 
个 文件 即 为 新 闻 后 全 管理 的 主要 文件 。 下 面 分 别 进 行 介 绍 。 

(1 ) 管理 主页 面 
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面 时 嵌 套 在 届 硬 的 
边框 架 部 分 ， 如 图 6-19 所 示 。 
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国名 6-19 新 闻 管理 主页 面 效 果 


该 管理 页 面 在 编程 上 和 新 闻 列 表 页 面 news_list.asp 的 功能 是 差不多 的 ， 主 要 多 了 “ 修 
改 /删除 ”命令 ， 单 击 “ 修 改 ” 命 令 能 够 通过 新 闻 ID 打开 news_modify.asp 页 面 显 示 相 应 的 
新 闻 并 进行 修改 ， 单 击 “ 删 除 ” 命 令 能 直接 删除 指定 的 新 闻 。news_admin.asp 代码 分 析 如 下 


( 前 面 出 现 过 的 代码 就 不 再 介绍 ， 主 要 介绍 加 黑 部 分 的 新 功能 )。 


<!--#include file="../config.asp"--> 

<% 

if request("action")="del" then 

"1f session("user prop")="admin" then 
1d=request("1d") 

Set rs = conn.execute("delete * from 新闻 表 WHERE 新 闻 ID=" +id) 
'end 1f 

end 1f 

0%0> 

<% 

set rs=server.createobject("adodb.recordset") 
sql="select* from 新 闻 表 order by 新 闻 ID DESC" 
rs.open Sql,conn,1 ,1 

pagesize=20 


一 1 


if request("page")="" or request("page")<=0 then 
page=1 
else 
page=request("page") 
end 1f 
recordall=rs.recordcount 
if recordall<>0 then 
RS.PageSize = Cint(pagesize) 
pageall=INT(recordall / pagesize * -1)*-1 
therecord=recordall-((page-1)*pagesize) 
Ts.absolutepage=CJInt(page) 
end 1f 
00>> 
<html> 
<head> 
<title> 中 国 目 考 教 育 网 后 全 管理 </title> 
<meta http-equiv="Content-Type" content "texthtml; charset=gb2312"> 
<link href="/css/css.css" rel="stylesheet" type="text/css"> 
</head> 
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> 
<table width="100%" border="0" cellpadding="0" cellspacing="0" background="/images/titles.gif"'> 
<tr> 
<td width="81%" valign="bottom"><table width="80%" border="0" cellspacing="0" cellpad 
ding="8"> 
<tr> 
<td width="29%" align="center" valign="bottom" class="admin-title"> 狐 闻 管 理 </td> 
<td width="71%" valign="bottom"><a href="news add.asp" target=" Self 添加 新 闻 
</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="news admin.asp" target=" Self 新 闻 管 理 </a></td> 
</tr> 
</table></td> 
<td width="19%"><1mg src="/i1mages/spacer.gif" width="1" height="30"></td> 
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</tr> 
</table> 
<table width="100%" border="0" cellpadding="0" cellspacinge="0" > 
<tr> 
<td bgcolor="#D9D9D9"><1mg src="/images/spacer.gif" width="1" height="1"></td> 
</tr> 
<tI> 
<td bgcolor="#E8E8E8"><1mg src="/images/spacer.gif" width="1" height="1"></td> 
</tr> 
</table> 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td>&nbsp;</td> 
</tr> 
</table> 
<table width="98%" border="0" align="center" cellpaddine="1" cellspacing="1" bgcolor="#1AA9D7"> 
<tr> 
<td colspan="S" bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="0" cellpad 
ding="0"> 
<tr> 
<td width="6%" align="center" background="/images/td title01.g1f"><font color="#FFFF 
FF">ID</font></td> 
<td width="53%" align="center" background="/images/td title01.g1f"><font color="#FFFF 
FF"> 狐 闻 标 题 </font></td> 
<td width="10%" align="center" background="/images/td tittle01.glif ><font color="#FFFF 
FF"> 狐 闻 日 期 </font></td> 
<td width="11%" align="center" background="/images/td tttle01.glif ><font color="#FFFF 
FF"> 新 闻 地 域 </font></td> 
<td width="18%" align="center" background="/images/td title01.gif"><font color="#FFFF 
FF"> 新 闻 管 理 </font></td> 
<td width="2%" background="/images/td title0l.gif"><i1mg Src= images 人 td title01.glf 
width="8" height="27"></td> 
</tr> 
</table></td> 
</tr> 
<% 
if rs.recordcount<>0 then 
for 1=1 to pagesize 
if rs.eof then 
exlt for 
end 1f 
200>> 
<tr <%if (1 mod 2)<>0 then%>bgcolor="#EBF2F6"<%else%o> bgcolor="#FFFFFF"<%end lfyo>> 
<td width="6%" align="center" ><9%=Ts(" 淅 闻 ID")%></td> 
<td width="53%"><a href="/news/news content.asp?news id=<%= Ts(" 新 闻 ID") %>" target=" 


blank"><9%=rs(" 新 闻 标 题 )%></a></td> 
<td width="10%" align="center"><o%=rs(" 新 闻 日 期 )%></td> 
<td width="119%" align="center"><%=rs(" 狐 闻 地 域 ")%></td> 
<td width="20%" align="center"> 
<a href='"'news_modify.asp?id=<%=rs(" 新 闻 ID")%>"> 修 改 </a>// 通 过 单 击 修改 传递 新 闻 ID 到 
指定 的 news_modify.asp 
&nbsp;/&nbsp;<a href='"'news_admin.asp?action=del&id=<%=rs(" 新 闻 ID")%>" onClick="'return 
confirm(' 真 的 要 删除 这 条 新 闻 吗 ?")"> 删 除 </a></td>// 通 过 单 击 删除 弹出 确认 删除 提示 “ 真 的 要 删除 新 闻 
吗 ? ” 按 确认 按钮 后 就 可 以 直接 删除 
</tr> 
<% 
rs.mMOovenext 
next 
end 1f 
0%0> 
</table> 
<table width="98%" border="0" align="center" cellpadding="1" cellspacing="3" bgcolor="#1AA9D7"> 
<tr> 
<td colspan="3" bgcolor="#FFFFFF"><1Iimg src="/i1mages/spacer.gif" width="1" height="1"></td> 
</tr> 
<tr> 
<td width="54%" align="left"” >&nbsp;&nbsp;<font color="#FFFFFF"> 第 <%=page%> 页 / 共 
<%=pageall%> 员 </font></td> 
<td width="15%" align="center">&nbsp;</td> 
<td width="31%" align="right"> <font color="#FFFFFF"> 
<%if Cint(page-1)<=0 then 
response.write "上 一 页 " 
else%o> 
<a hre 伟 "news admin.asp?page=<%=page-1%>"> 上 一 页 </a> 
<%end i1f%0> 
&nbsp;/&nbsp; 
<%If Cint(paget+l)>Cint(pageall) then 
response.write "下 一 页 " 
else%o> 
<a hre 伟 "news admin.asp?page=<%=paget+1%>"> 下 一 页 </a> 
<%end lfyo> 
&nbsp;&nbsp;&nbsp; nbsp;</font></td> 
</tr> 
</table> 
</body> 
</html> 


(2 ) 新 闻 修 改 页 面 
接 下 来 先 介绍 新 闻 修 改 页 面 news_modify.asp 的 设计 ， 设 计 后 的 效果 如 图 6-20 所 示 。 
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: : 国 
body> [RID 100% ~v 681 x 405vy 9 下 /1 秒 简体 中 让 (GB2312) 











由 图 6-20 ”新 闻 修 改 页 面 效 果 


该 功能 主要 是 把 要 修改 的 新 闻 相 关内 容 显 示 在 一 个 表单 form 里 和 面 ， 通 过 在 网 页 上 和 在线 
修改 后 ， 单 击 提 交 按 钮 调用 news_update.asp 页 面 实现 新 闻 内 容 的 更 新 。 代 码 分 析 如 下 。 


<!--#include file="../config.asp"-->// 调 用 config.asp 页 面 打 开 数 据 库 

<% 

if request("1d")<>"" then 

"1f session("user prop")="admin" then 

1d=request("1d") 
set rs=server.createobject("adodb.recordset") 
sql="select * from 新 闻 表 where 新 闻 ID="&id&" order by 新 闻 ID DESC" 
rs.open sql,conn,1,1 














'end 1f 
end 1f 
%>/ 上 面 一 段 程 序 是 验证 登录 者 号 份 后 通过 新 闻 的 ID 打开 sql 查询 
<html> 
<head> 





<title> 中 国 目 考 教 育 网 后 台 管 理 </title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<link href="/css/css.css" rel="stylesheet" type="text/css"> 
</head> 
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> 
<table width="100%" border="0" cellpadding="0" cellspacing="0" background="/images/titles.gif"'> 
<tr> 
<td width="81%" valign="bottom"><table width="80%" border="0" cellspacine="0" 
cellpadding="8"> 
<tr> 
<td width="29%" align="center" valign="bottom" class="admin-title"> 新 闻 管 理 </td> 
<td width="71%" valign="bottom"><a href="news addasp" target=" Self 添加 新 闻 
</a>&nbsp;&nbsp;&nbsp;&nbsp;<a hre 全 "news admin.asp" target=" self'> 新 闻 管 理 </a></td> 
</tr> 
</table></td> 
<td width="19%"><1mg src="/i1mages/spacer.gif" width="1" height="30"></td> 
</tr> 


</table> 
<table width="100%" border="0" cellpadding="0" cellspacine="0" > 
<tr> 
<td bgcolor="#D9D9D9"><1img src="/images/spacer.gif" width="1" height="1"></td> 
</tr> 
<tI> 
<td bgcolor="#E8E8E8"><1mg src="/images/spacer.gif" width="1" height="1"></td> 
</tr> 
</table> 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td>&nbsp;</td> 
</tr> 
</table> 
<table width="98%" border="0" align="center" cellpaddine="1" cellspacine="1" bgcolor="#FFFFFF" 
class="rightA"> 
<form name='"forml' method="'post'" action='""news_update.asp">// 设 置 表单 的 动作 为 在 提交 
的 时 候 传递 指定 的 值 到 news_update.asp 页 面 
<tr bgcolor="#FFFFFF"> 
<td colspan="3" align="center"><table width="100%" border="0" cellspacing="0" 
cellpadding="0"> 
<tr> 
<td align="left" background="/images/td title01l.glif class="fontl4px"><font 
color='"#EFFFFFF">&nbsp;&nbsp; 添 加 新 闻 </font></td> 
<td width="2%" background="/images/td tttle0l.gif ><limg src="/images/td title01.g1f" 
width="8" height="27"></td> 
</tr> 
</table></td> 
</tr> 
<tr bgcolor="EBF2F6"> 
<td width="3%" align="center"><font color="1AA9D7"> 国 < font></td> 
<td width="7%"> 狐 闻 标 题 </td> 
<td width="90%"><input name="news title” type= "text” class="registe"” size="70" 
value="<%=rs(" 独 闻 标题 ")%>" ></td> 
</tr> 
<tr bgcolor="#FFFFFF"> 
<td height="11" align="center"><font color= "1AA9D7"> 国 <font></td> 
<td bgcolor='"#FFFFFF"> 新 闻 出 处 </td> 
<td><input name="news come'" type='"text" class="registe” value="<o%=rs(" 新 闻 出 处 )%>" 
siZe="35"> 
</td> 
</tr> 
<tr bgcolor="EBF2F6"> 
<td height="S" align="center"><font color="1AA9D7"> 国 font 过 </td> 
<td> 新 闻 地 域 </td> 
<td> <input name="news area" type="text" id="news area" value="<%=rs(" 狐 闻 地 域 ")%>"> 
&nbsp;</td> 
</tr> 
<tr bgcolor="f{ffff"> 
<td height="6" align="center"><font color="1AA9D7"> 故 </font></td> 
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YT <td> 新 闻 日 期 </td> 
| <td><input name="news date" type='"text" id="news date" value="<o%=rs(" 狐 闻 日 期 
")%>"></td> 
</tr> 
<tr bgcolor="#FFFFFF"> 
<td align="center" valign="top"><font color="1AA9D7"> 国 <font></td> 
<td valign="top" bgcolor='#FFFFFF"> 新 闻 正 文 </td> 
<td><textarea name="news content cols="70" rows="10" wrap=" VIRTUAL" 
class='"registe"><o%=rs(" 新 闻 内 容 ")%></textarea><input name="news id" type="hidden" value="<%=rs(" 新 
闻 ID")%>"></td> 
</tr> 
<tr bgcolor="#FFFFFF"> 
<td colspan="3" class="fenlei"><1mg src="../images/Spacer.gif" width="1" height="S5"></td> 
</tr> 
<tr align="center" bgcolor="#FFFFFF"> 
<td colspan="3" class="fenlei"><input name="Submit" type="submit" class="registebt" value=" 





提交" 
&nbsp; <input name="Submit2" type="reset" class="registebt" value=" 清 ” 除 "></td> 
</tr> 
</form> 
</table> 
<br> 
<br> 
| </body> 
</html> 
<% 
rs.close 
set rs=nothing 
\ | conn.close 


El set conn=nothing %>// 清 空 记录 和 集 关 闭 数 据 库 连接 


(3) 新 闻 时 新 负面 
news_update.asp 是 处 理由 news_modify.asp 传 过 来 的 信息 的 ASP 编程 命令 ， 完 全 是 一 版 
ASP 代码 ， 如 图 6-21 所 示 。 















四 D:\zk2ii\admin\news\news_update. asp (XHTML = 口 其 
疏导 记忆 和 config. asp 守 
K!--#include file= . .7 .7 config.asp ——> 
< 风 
国 if request {news_id’)<>"" then 
i111 SB3SSLODOI UsSer DrOD 二 了 QTI1l Tner 
业 才 set rs=server. createobject ("adodb. recordset") 
3 sql="update 新 闻 表 set 新 闻 标 题 ="“&request ("news_title")&”, 新 闻 出 外 ="“& 
| request ("news_come")&"” ,新 闻 内 容 =*“&request ("news_content")&” ,新 闻 图 片 =“&request 
至 “news_image”)&” ,新 闻 地 域 ="“&request ("news_area")&"” ,新 闻 日 期 =*“&request ("news_date” 
a )&" ”where 新 闻 ID="&CInt (request ("news_id")) 
rs. open sql, co 1,1 
1f Err.Number>0 then 
侠 response.Wwrite“ 对 不 起 ， 数 据 库 处 理 有 错误 ， 请 稍 恕 再 试 ..." 
response。 end 
| 如 | else 
a response,. redirect “news_admin. asp” 
4 end 1f 
国 ond if 
一 end 1f 
辐 | rs.close 
set rs=nothing 
加 corm. close 
[3 set corm=nothing 
冯 > 
贞 
y 
mmrai Hh hr nNN nN 








国 图 6-21 编程 的 代码 视窗 效果 
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代码 分 析 如 下 : 


<!--#include file="../config.asp"-->// 调 用 config.asp 页 面 打 开 数 据 库 
<% 
if request("news 1d")<>"" then 
'if session("user prop")="admin" then// 判 断 登 录 者 是 否 为 管理 者 admin 
set rs=Server.createobject("adodb.recordset")// 设 置 服务 器 打开 记录 集 的 方式 
sgl="update 新 闻 表 set 新 闻 标题 ="&request("news title)&" ,新 闻 出 处 ="&request 
("news _ come 和 &", 新 闻 内 容 ="&request(mnews _ contentD)&", 新 闻 图 片 ="&request(news image me&" ,新闻 了 夺 尖 和 
地 域 ="&request("news area")&", 新 闻 日 期 ="&request("news date")&" where 新 闻 ID="&CInt(request ] | | | 
("news id"))// 使 用 sql 查询 相应 的 记录 集 | 去 


rs.open sql,conn,1,1 



































1f Err.Number>0 then 
response.write "对 不 起 ， 数 据 库 处 理 有 错误 ， 请 稍 候 再 试 …V 如 果 更 新 出 钳 则 提示 出 钳 信 息 
response.end a 
else a 
response.redirect "news admin.asp"// 蝎 新 成 功 后 直接 指 问 news admin.asp 页 面 
end 1f 
'end 1f 
end 1f 
rs.close 


set rs=nothing 
conn.close 
set conn=nothing 


%>// 关 闭 数 据 库 连 接 并 清空 记录 
(4 ) 六 加 新 闻 由 1 加 





news_add.asp 是 添加 新 闻 的 功能 页 面 ， 设 计 后 的 效果 如 图 6-22 所 示 。 


[bw| D: \zk211\adainVnews\Vnews_add. asp* 一 


二 . 
QHD confie. asp TF 
二 广 1 一 大 所 : : : 3 
; : : 所 
新 闻 和 省 理 : : 
: 
7 : 添加 新 闻 新 闻 管理 : 
Y 9 
RN 






































apa [RI 100% v681 x 406v 10 /1 秒 简体 中 站 (6B2312) 





国 图 6-22 添加 新 闻 页 面 的 设计 效果 


此 功能 的 技术 难点 在 于 添加 新 闻 的 时 候 要 把 新 闻 按 地 域 来 进行 分 类 ， 这 就 需要 加 入 单独 
的 ASP 代码 来 实现 ， 具 体 的 代码 如 下 ( 加 黑 部 分 为 难点 与 重点 )。 
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<!--#include file="../config.asp"--> 
<% 
/从 地 域 表 中 读 出 地 域名 称 
set rs=server.createobject("'adodb.recordset"') 
sql="'select * from 地 域 表 order by 地 域 ID" 
rs.open sql,conn,]l,l 
news_title=Request.Form('"'news_title") 
news_come=Request.Form("'news_come"') 
news_content=Request.Form("'news_content"') 
news_image=Request("'news_image"') 
news_area=Request("'news_area"') 
now_year=Year(Date) 
if Month(Date)<10 then 
now_month=0&Month(Date) 
else 
now_month=Month(Date) 
end if 
if Day(Date)<10 then 
now_day=0&Davy(Date) 
else 
now_day=Day(Date) 
end if 
news_date=now_year&"-"&now_ month&"-"&now_day 
if news_title<>"'" then 
conn.execute("insert into 新 闻 表 (新 闻 标 题 ,新 闻 出 处 ,新 闻 内 容 ,新 闻 图 片 ,新 闻 日 期 ,新 闻 地 域 ) 
values 
('"+news_title+t'",'"+news_comet+""',"+news_content+'"','"+news_image+""','""+news_datet+'""',"+news_ 
areat+""')"') 
end if 
if Err.Number>0 then 
response.write "对 不 起 ， 数 据 库 处 理 有 错误 ， 请 稍 候 再 试 …// 提 交 出 错 打开 相应 的 出 错 信息 
response.end 
else 
end if 
%> 
<html> 
<head> 
<title> 中 国 目 考 教育 网 后 台 管理 </title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<link href="/css/css.css" rel="stylesheet" type="text/css"> 
</head> 
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> 
<table width="100%" border="0" cellpadding="0" cellspacing="0" background="/images/titles.gif"'> 
<tr> 
<td width="81%" valign="bottom"><table width="80%" border="0" cellspacing="0" cellpaddine= 
"gr 


<tr> 
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<td width="29%" align="center" valign="bottom" class="admin-title'"> 新 闻 管 理 </td> 
<td width="71%" valign="bottom"><a href="news add.asp" target=" self'> 添 加 新 闻 </a> 
&nbsp;&nbsp;&nbsp;&nbsp;<a hre 全 "news admin.asp" target=" Self 新 闻 管 理 </a></td> 


</tr> 
</table></td> 
<td width="19%"><1mg src="/images/spacer.gif" width="1" height="30"></td> 
</tr> 
</table> 
<table width="100%" border="0" cellpadding="0" cellspacing="0" > 
<tr> 
<td bgcolor="#D9D9D9"><1img src="/images/spacer.gif" width="1" height="1"></td> 
</tr> 
<ftr> 
<td bgcolor="#E8E8E8"><1mg src="/images/spacer.gif" width="1" height="1"></td> 
</tr> 
</table> 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td>&nbsp;</td> 
</tr> 
</table> 


<table width="98%" border="0" align="center" cellpaddinge="1" cellspacine="1" bgcolor="#FFFFFF" 
class="rightA"> 
<form name="form1" method="post" action=""> 
<tr bgcolor="#FFFFFF"> 
<td colspan="3" align="center"><table width="100%" border="0" cellspacing="0O" 
cellpadding="0"> 
<tr> 
<td align="left" background="/images/td title01.g1f" class="fontl4px"><font 
color="#FFFFFF">&nbsp;&nbsp; 添 加 新 闻 </font></td> 
<td width="2%" background="/images/td title01.gif"><1mg src="/images/td title01.g1f" 
width="8" height="27"></td> 
</tr> 
</table></td> 
</tr> 
<tr bgcolor="EBF2F6"> 
<td width="3%" align="center"><font color="1AA9D7"> 国 <font></td> 
<td width="7%"> 狐 闻 标 题 </td> 
<td width="90%"><input name="news title" type="text" class="registe" size="70"></td> 
</tr> 
<tr bgcolor="#FFFFFF"> 
<td height="11" align="center"><font color="1AA9D7"> 国 <font></td> 
<td bgcolor="#FFFFFF"> 狐 闻 出 处 </td> 
<td><input name="news come" type="text"” class="registe” value=" 中 国 日 考 教育 网 " size= 
"35"> 
</td> 
</tr> 
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<tr bgcolor="EBF2F6"> 
<td height="12" align="center"><font color= "1AA9D7"> 国 < font></td> 
<td> 新 闻 地 域 </td> 
<td><select name="news area" 1d="news area'"> 
<option selected value=" 全 国 ">--- 选 择 新 闻 所 针 对 的 地 域 ---</option> 
<%for 1=1 to rs.RecordCount%o> 
<option value="<%=rs(" 地 域名 称 ")%>"><%=rs(" 地 域名 称 ")%></option> 
<% 
if rs.eof then 
exlt for 
end 1f 
rs.movenext 
next 
0%0> 
</select> 
&nbsp; 不 选择 区 域 即 为 全 国 和 范围 新 闻 </td> 
</tr> 
<tr bgcolor="#FFFFFF"> 
<td align="center" valign="top"><font color="1 AA9D7"> 故 </font></td> 
<td valign="top" bgcolor='#FFFFFF"> 新 闻 正 文 </td> 
<td><textarea name="news content" cols="70" rows="30" wrap="VIRTUAL" class="registe"> 
</textarea></td> 
</tr> 
<tr bgcolor="#FFFFFF"> 
<td colspan="3" class="fenlei"><1img src="../images/Spacer.gif" width="1" height="5"></td> 
</tr> 
<tr align="center" bgcolor="#FFFFFF"> 
<td colspan="3" class="fenlei"><input name="Submit" type="submit" class="registebt" value=" 
提交 "> 
&nbsp; <input name="Submit2" type="reset" class="registebt" value=" 清 ” 除 "></td> 
</tr> 
</form> 
</table> 
<br> 
<br> 
</body> 
</html> 
<% 
rs.close 
set rs=nothing 
conn.close 


set conn=nothing %> 


介绍 完 以 上 4 个 功能 页 面 ， 整 个 教育 网 站 中 主要 的 信息 发 布 功能 与 后 合 管理 功能 已 经 基 
本 搭建 完成 。 通 过 单 击 admin.asp 页 面 左边 框架 的 链接 可 切换 到 相应 的 动态 管理 、 应 试管 理 
页 和 面 ， 这 几 个 功能 的 后 合 管理 完全 一 样 ， 因 此 ， 对 于 教育 网 站 的 动态 管理 、 应 试管 理 等 就 不 
再 做 介绍 。 


6.5 ”学员 注册 与 学 员 害 理 


作为 一 个 教育 在 线 网 站 能 够 实现 在 线 报名 很 重要 ， 因 为 报名 时 要 留 下 很 多 学 员 信息 ， 所 
以 在 线 报名 所 覆盖 的 表单 内 容 比 较 多 ， 如 图 6-23 所 示 。 


6.5.1 ”在线 注册 主页 面 


baoming.asp 页 向 是 这 个 网 站 进行 网 上 注册 的 主要 页 面 。 表 单 中 有 学 员 报 名 时 提供 的 姓 
名 、 身 份 证 号 、 性 别 、 出 生日 期 、 民 族 、 政 治 面 貌 等 近 39 个 信息 需要 备案 ， 这 在 前 而 数据 
库 设 计 的 时 候 也 分 析 过 ， 这 里 设计 的 不 同文 本 域 、 单 选 按钮 、 列 表 / 菜 单字 段 名 称 要 与 数据 
库 设 计 的 字段 名 称 一 一 对 应 起 来 ， 这 样 在 提交 表单 的 时 候 能 够 相应 储存 到 数据 库 中 。 
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6-23 报名 注册 表单 效果 
该 页 面 的 代码 分 析 如 下 。 


<!--#include file="../config.asp"--> 

<% 

set rs city=server.CreateObject("ADODB.Recordset") 

Sql city="select * from 区 号 表 " 

TS_clty.open Sql_clty,conn ,1 ,1 

%>// 通 过 城市 区 号 表 打 开 数 据 库 进行 sql 但 询 

<html> 

<head> 

<title> 中 国 目 考 教育 网 </title> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 











<link href="/css/css.css" rel="stylesheet" type="text/css"> 
<SCRIPT LANGUAGE="JavaScript">// 加 黑 的 这 段 JavaScript 命令 用 来 检测 注册 表单 的 合法 性 
function Check(){ 
with(document.all.reg){ 
if(name.value==""){ 
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alert(' 必 须 输 入 用 户 名 ! ); 
name.focus(); 
return false; 
} 
if(password.value!="'&&chkpass.value!=""){ 
if(password.value!=chkpass.value){ 
alert(' 两 次 输入 的 密码 不 一 致 ! \n\n 请 重新 输入 ! ); 
password.value="'; 
chkpass.value="'; 
password.focus(); 


return false; 


} 
}else{ 
alert(' 必 须 输入 密码 和 验证 密码 ! ); 
password.focus(); 
return false; 
} 


if(idcard.value==""){ 
alert(' 必 须 输 入 身份 证 号 ! ); 
idcard.focus(); 
return false; 
} 
if(passq.value==""){ 
alert(' 请 选择 您 的 提示 问题 ! ); 
passq.focus(); 
return false; 
} 
if(passa.value=="'){ 
alert(" 请 选择 您 提示 问题 的 答案 ! 7); 
passa.focus(); 
return false; 
} 
if(phonenum.value=="'){ 
alert(' 请 填写 电话 号 码 ， 以 便于 我 们 与 您 联系 ! ); 
phonenum.focus(); 
return false; 
} 
if(zip.value==""){ 
alert(' 请 填写 邮政 编码 ， 以 便于 我 们 与 您 联系 ! ); 
zip.focus(); 
return false; 
} 
if(address.value=="'){ 
alert(" 请 填写 通讯 地 址 ， 以 便于 我 们 与 您 联系 ! 7); 
address.focus(); 
return false; 


200 


} 
if(idcard.value.length==18){ 


if(idcard.value.substr(6,4)!=birthy.valuellidcard.value.substr(10,2)!=birthm.valuellidcard.value.substr( 
12,2)!=birthd.value){ 
alert(' 出 生年 月 日 与 喘 份 证 上 的 不 符 ， 请 检查 !"); 
idcard .focus(); 
return false; 
} 
} 
if(idcard.value.length==1S){ 
if(idcard.value.substr(6,2)!=birthy.value.substr(2,2)|lidcard.value.substr(8,2)!=birthm.valuellidec 
ard.value.substr(10,2)!=birthd.value){ 
alert(' 出 生年 月 日 与 身份 证 上 的 不 符 ， 请 检查 !"); 
idcard .focus(); 
return false; 
} 
} 
if(idcard.value.length!=1S&&idcard.value.length!=18){ 
alert(' 身 份 证 号 填写 有 误 ， 请 检查 !"); 
idcard .focus(); 


return false; 


} 
</SCRIPT> 


<style type="text/css"> 
<|-- 
.Stylel {font-size: 16px} 
.Style2 {color: #FFOO0O00} 
= 
</style> 
</head> 
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> 
<table width="780" border="0" align="center" cellpadding="0" cellspacing="0"> 

<tI> 

<td height="27" colspan="5" bgcolor="#1AA9D7"><div align="center" class="Css"> 
<div align="left"> <span class="stylel"> 中 日 考 教育 网 </span> <span class= 
"stylel"> 
</span></div> 
</div></td> 

</tr> 
</table> 
<table width="780" border="0" align="center" cellpadding="0" cellspacing="0"> 

<tI> 

<td><img src="../images/index 02.gif" width="780" height="83" alt=""></td> 
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</tr> 
</table> 
<table width="780" border="0" align="center" cellpadding="3" cellspacing="0"> 
<tr> 
<td bgcolor="#1AA9D”7"> <span class="css"> <%=navigation%></span></td> 
</tr> 
</table> 
<br> 
<table width="778" border="0" align="center" cellpadding="0" cellspacing="0"> 
<tr> 
<td width="556" align="left"> 
<table border="0" cellpadding="8" cellspacing="1" bgcolor="#FFFFFF"> 
<form 1id="reg" onSubmit="return Check()" name="reg" method="post" action="deal.asp"> 
<tr align="center" bgcolor="#CCCCCC"> 
<td colspan="2" class="fontl4px"> 网 &nbsp; 上 &nbsp; 报 &nbsp; 名 <span class="style2"> 
(这 类 号 必 填 )</span></td> 
</tr> 
<tr bgcolor="#EAEAEA"> 
<td width="215" align="right"> 报 考 城 市 : </td> 
<td> 
<select name="bk_city"'> 
<% 
for i=1 to rs_city.recordcount 
%> 
<option value="<%=rs_city(" 城 市 ")%>" selected><%=rs_city(" 城 市 '")%></option> 
<% 
if rs_city.eof=1 then 
exit for 
else 
rs_city.movenext 
end if 
next 
%> 
</select>// 选 择 城市 的 列表 值 
<span class="style2"> 类 </span></td> 
</tr> 
<tr bgcolor="#EAEAEA"> 
<td width="215" align="right"> 姓 名 : </td> 
<td width="317"> <input type="text" 1d="name2" name="name" size="15"> 
<span class="style2"> 火 (请 按 身 份 证 真实 填写 ) ” </span></td> 
</tr> 
<tr bgcolor="#EAEAEA"> 
<td align='"right"> 身 份 证 号 : </td> 
<td> <p> 








= 


<input type="text" name="1ldcard" 1d="1dcard" size="30"> 


<span class="style2"> * <br> 
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</span><span class="style2"> ( 


建 档案 时 要 用 到 里 份 证 号码 ， 请 务必 填写 正确 。 











) </span></p> </td> 


</tr> 
<tr bgcolor="#EAEAEA"> 
<td align="right"> 性 别 : </td> 
<td> <input name="sex" type="radio" value=" 筋 " checked> 


为 
<input name="sex" type="radio" value=" 女 "> 
女 
<span class="style2"> * </span></td> 
</tr> 


<tr bgcolor="#EAEAEA"> 
<td align="right"> 出 生日 期 :</td> 
<td> 


<select name="'birthy" id=""'select2"'> 


<% for i=1 to 31 
temp=1989.i 
%> 
<option value="'<%=temp%>"><%=temp %></option> 
<% next 和 > 
</select> <select name="'birthm" id="'select6"> 
<% for i=1 to 12 
%> 
< if len(i)=1 then 
temp=0 &i 
else if len(i)=2 then 
temp=i 
end if 
end if 
%> 
<option value="'<%=temp%>"><%=temp %></option> 
<% next 和 > 
</select> <select name="'birthd" id=""'select6"'> 
<% for i=1 to 31 
%> 
< if len(i)=1 then 
temp=0 Ki 
else if len(i)=2 then 
temp=i 
end if 
end if 
%> 
<option value="'<%=temp%>"><%=temp%></option> 
<% next 和 > 


</select> /上 面 这 段 程序 是 通过 列表 值 选择 出 生年 月 
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<span class='"style2"> 类 </Span></td> 
</tr> 
<tr bgcolor="#EAEAEA"> 
<td align="right">Email: </td> 
<td> <input name="email" type="text" id="email" size="30"><span class="style2">( 没 
有 可 以 不 填 )</span></td> 
</tr> 
<tr bgcolor="#EAEAEA"> 
<td align="right"> 民 族 : </td> 


ll 二 


<td> <Iinput name="peoples" 1d="peoples" size="15"> <span class= "style2"> 类 </Span> 
</td> 
</tr> 
<tr bgcolor="#EAEAEA"> 
<td align="right"> 职 业 : </td> 
<td> 
<select name=""'profession" id="'select13"'> 
<option selected> 学 生 </option> 
<option> 教 师 </option> 
<option> 工 人 </option> 
<option> 警 察 </option> 
</select> // 此 段 是 选择 职业 
<span class="style2"> 类 </Span></td> 
</tr> 
<tr bgcolor="#EAEAEA"> 
<td align='"right"> 政 治 面 狗 : </td> 
<td> <select name="zzmm" 1d="select14"> 
<option selected> 团 员 </option> 
<option> 和 党 员 </option> 
<option> 工 人 </option> 
<option> 民 主 </option> 
</select> <span class="style2"> 大 </Span></td> 
</tr> 
<tr bgcolor="#EAEAEA"> 
<td align="right"> 学 历 : </td> 
<td> 
<select name="'xueli" id="'select1S "> 
<option selected> 低 于 专科 </option> 
<option> 专 科 </option> 
<option> 本 科 </option> 
</select> // 选 择 最 高 学 历 
<span class='"style2"> 类 </Span></td> 
</tr> 
<tr bgcolor="#EAEAEA"> 
<td align="right"> 户 口 所 在 地 : </td> 
<td><input name="hkarea" type="text" size="15"></td> 
</tr> 
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</td> 


</td> 


<tr bgcolor="#EAEAEA"> 
<td align='"right"> 户 口 类 型 : </td> 
<td> <select name="hktype" 1d="select17"> 
<option selected> 城 市 </option> 
<option> 城 镇 </option> 
<option> 农 村 </option> 
</select> </td> 
</tr> 
<tr bgcolor="#EAEAEA"> 
<td align="right"> 健 康 状 况 :” ”</td> 
<td> <select name="health" 1d="select18"> 
<option selected> 优 秀 </option> 
<option> 恨 好 </option> 
<option> 一 般 </option> 
</select></td> 
</tr> 
<tr bgcolor="#EAEAEA"> 
<td align="right"> 所 属 行业 : </td> 
<td> <select name="hangye" 1d="select19"> 
<option selected></option> 
<option> 制 造 业 </option> 
<option> 娱 乐 业 </option> 
<option> 教 育 业 </option> 
<option> 服 务 性 行业 </option> 
</select>// 选 择 行业 


</tr> 
<tr bgcolor="#EAEAEA"> 
<td align='"right"> 固 定 电话 : </td> 
<td> <input name="phonenum" type="text" size="20"> 
<span class="style2"> 炎 (不 用 填 区 与 )</span></td> 
</tr> 
<tr bgcolor="#EAEAEA"> 
<td align='"right"> 邮 政 编码 : </td> 
<td> <input type="text" 1d="zZip" name="zip"> <span class="style2"> 
大 </Span></td> 
</tr> 
<tr bgcolor="#EAEAEA"> 
<td align='"right"> 通 讯 地 址 : </td> 


<td> <mput type="text" 1d="address" name="address"> <span class="style2">**</span> 





</tr> 
<tr bgcolor="#EAEAEA"> 
<td align="right"> 设 定 密码 ;</td> 


<td> <input type="password" 1d="password" name="password" size="]15"> 
<span class="style2"> 类 </Span></td> 
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</tr> 
<tr bgcolor="#EAEAEA"> 
<td align='"right"> 重 复 密 但 :</td> 
<td> <input type="password" 1d="chkpass" name 
<span class='"style2"> 类 </Span></td> 
</tr> 
<tr bgcolor="#EAEAEA"> 
<td align='"right"> 密 但 得 询 和 修改 时 提示 的 问题 : </td> 
<td><p> 


一 1 


chkpass" size="15"> 


一 1 


<input name="passq" type="text"” 1 
<span class='"style2"> 类 </Span> </p></td> 
</tr> 
<tr bgcolor="#EAEAEA"> 
<td align="right"> 密 人 码 伍 询 和 修改 时 提示 问题 的 答案 : ”</td> 
<td><p> 


二 1 


passq" size="45"> 


<input type="text" name="passa" 1d="passa" silze="45"> 
<span class="style2"> 类 </Span> </p></td> 

</tr> 
<tr bgcolor="#EAEAEA"> 

<td align="right"> 其 他 说 明 : </td> 

<td><textarea name="question"></textarea></td> 
</tr> 
<tr align="center" bgcolor="#EAEAEA"> 

<td colspan="2"> 网 上 报考 </td> 
</tr> 
<tr align="center" bgcolor="#EAEAEA"> 

<td align="right"> 考 区 : </td> 

<td align="left"><input name="zZkarea"></td> 
</tr> 
<tr align="center" bgcolor="#EAEAEA"> 

<td align="right"> 准 考证 号 : </td> 

<td align="left"><input name="zkcard"> <font color="#FF0000"> 新 生 不 用 填 </font> 

</td> 

</tr> 
<tr align="center" bgcolor="#EAEAEA"> 

<td align='"right"> 报 考 专业 : </td> 

<td align="left"><input name="bkzhuanye"></td> 
</tr> 
<tr align="center" bgcolor="#EAEAEA"> 

<td colspan="2"> 报 考 科 目 </td> 
</tr> 
<tr align="center" bgcolor="#EAEAEA"> 

<td align='"right"> 科 目 一 </td> 

<td align="left"> <input name="km1" size="12.5%"></td> 
</tr> 
<tr align="center" bgcolor="#EAEAEA"> 
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<td align='"right"> 科 目 二 </td> 
<td align="left"> <input name="km2" size="12.5%"></td> 
</tr> 
<tr align="center" bgcolor="#EAEAEA"> 
<td align="right"> 科 日 三 </td> 
<td align="left"> <input name="km3" size="12.5%"></td> 
</tr> 
<tr align="center" bgcolor="#EAEAEA"> a 
<td align="right"> 科 目 四 </td> 国生 =: 
<td align="left"> <input name="km4" size="12.5%"></td> 
< 
<tr align="center" bgcolor="#EAEAEA"> 
<td align="right"> 科 目 五 </td> 
<td align="left"> <input name= "kmS"”Slze= "12.9%0"></td> 
</tr> 
<tr align="center" bgcolor="#EAEAEA"> 
<td align="right"> 科 日 六 </td> 
<td align="left"> <input name="km6" size="12.5%"></td> 
</tr> 
<tr align="center" bgcolor="#EAEAEA"> 
<td align="right"> 科 日 七 </td> 
<td align="left"> <input name="km7" size="12.5%"></td> 
</tr> 
<tr align="center" bgcolor="#EAEAEA"> 
<td align="right"> 科 目 八 </td> 
<td align="left"> <input name="km8" size="12.5%"></td> 
二 位 > 
<tr align="center" bgcolor="#EAEAEA"> 
<td colspan="2"><input name="submit" type="submit" value=" 确 定 "> &nbsp;&nbsp; 
<input name="submit" type="submit" value=" 重 盾 '"></td> 
</tr> 
</form> 
</table></td> 
<td width="222" align="left" valign="top"><table width="100%" border="0" cellspacine="0" cellp 
adding="6"> 
<tr> 
<td align="center" class="stylel1"><strong> 报 名 须知 </strong></td> 
</tr> 
<tr> 
<td><br> 
一 、 报名 表 所 列 各 项 请 如 实 填 号 ， 如 有 错误 责任 目 负 。<br 
二 、 已 报名 交 费 的 同学 ， 可 通过 报名 得 询 来 核实 目 己 是 否 已 报名 成 功 ， 如 没有 你 
的 信息 ， 请 及 时 与 目 考 服务 中 心 联系 ， 以 避免 错 报 、 漏 报 。<br> 
三 、 我 们 收 到 报名 表 后 会 尽快 将 审核 确认 信友 到 你 的 电子 邮箱 ， 并 统一 发 放 “ 中 
目 考 教育 网 学 员 证 ”。<br> 
四 、 目 学 考试 采取 “ 宽 进 严 出 ”的 政策 ， 免 试 入 学 。 学 生 在 考 期 间 需 努力 学 习 ， 
通过 全 部 考试 科目 后 获得 目 考 委 和 主考 院 校 联合 副 草 的 毕业 证 书 ， 国 家 承认 学 历 。<br> 
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五 、 考 生 填 写 信 息 务 必 准 确 、 真 实 ， 不 要 有 和 弄虚作假 行为 ， 以 免 给 目 己 和 目 基 服务 
中 心 造成 不 必要 有 的 损失 。<br> 

六 、 领 取 学 员 证 时 如 末 对 所 报 学校 或 专业 不 其 满意， 需要 调剂 到 其 他 院 校 或 专业 ， 
请 直接 与 我 们 联系 ， 我 们 会 及 时 快捷 地 将 学 生 调 剂 到 本 人 满意 的 主考 院 校 或 专业 。<br> 

七 、 如 采 在 报名 后 发 现 有 些 个 人 信息 填 错 了 ， 可 以 通过 报名 得 询 进入 跟 我 们 联系 ， 
而 不 要 重 痢 填写 ! <br> 

Emall:baoming(Ozk211.com<br></td> 











</tr> 
</table></td> 
</tr> 
</table> 
<p>&nbsp;</p><table width="780" border="0" align="center" cellpadding="2" cellspacing="0"> 
<tr> 
<td align="center" background="imagesindex 35.gif'><a href="/index.asp"> 首 页 <a> | <a 


hre 伍 "/aboutus.asp"> 关 于 我 们 </a> | <a hre 伍 "/lxwm.asp"> 联系 方式 </a> | <a href="/bbs/reguserl. 
asp"> 网 上 报名 </a> | <a hre 住 "/zpxx.asp"> 招聘 信息 </a> | <a hre 伍 "/mzsm.asp"> 人 免责 申明 </a></td> 
</tr> 
</table> 


<table width="780" border="0" align="center" cellpadding="3" cellspacing="0"> 

<tr> 
<td align="center" bgcolor="#1AA9D7"> 知 识 改 变 命运 ， 目 学 造就 人 才 ! </td> 

</tr> 

</table> 

</body> 

</html> 

<% 

rs city.close 

setrs city=nothing 

conn.close 

set conn=nothing 


900> 


在 sfcz 文件 夹 下 的 其 他 文件 是 用 来 制作 这 个 主页 面 的 参考 文件 ， 仅 供 参考 之 用， 感 兴 
趣 的 读者 可 以 自行 打开 进行 研究 。 


6.5.2 学员 管理 后 台 


同 自考 新 闻 管 理 后 谷 一 样 ， 学 员 管 理 的 后 谷 文件 全 部 放 在 了 admin 文件 来 里 。 主 要 由 
user_admin.asp ( 用 户 管理 主页 )、user_modify.asp ( 是 人 否 付费 修改 )、user_update.asp ( 用 
户 付 费 信息 更 新 ) 3 个 页 面 组 成 。 这 里 主要 介绍 付费 功能 的 实现 。 

(1 ) 用 户 名 管理 

该 页 面 设 计 后 的 效果 如 图 6-24 所 示 。 主 要 是 在 页 面 中 显示 目前 页 面 中 的 用 户 名 是 舍 
经 付费 ， 这 里 可 以 根据 用 户 的 使 用 习惯 自 定义 是 人 否 付 费 的 值 ， 可 以 设置 为 已 付费 值 为 1， 疫 
有 付费 值 为 2。 在 学 员 登 录 时 赋 子 每 个 学 员 一 个 Session 值 ， 调 用 付费 部 分 页 面 时 ， 通 过 判 
新 值 是 1 还 是 2 就 可 以 实现 对 页 面 是 舍 限 制 访问 。 


D: \zk21ii\admin\user \user modify. asp* | a | 


QH confie. asp 





用 户 管理 


Ne 
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Eee 





<%=rst" name” )%> 








<body> [R] i100% vv B27 x 256v 8 下 /1 秘 简体 中 站 (GB2312) 














国 图 6-24 学 员 是 否 付 费 后 合 设计 效果 


文 页 的 代码 令 计 如 下 。 


<!--#include file="../config.asp"--> 
<% 
if request("1d")<—"" then 
"1f session("user prop")="admin" then 
1d=request("1d") 
set rs=server.createobject("adodb.recordset") 
sql="select * from 资料 表 where UserID="&id&"" 
rs.open sql,conn,1,1 
'end 1f 
end 1f 
%>// 设 置 打 开 sql 数据 得 询 
<html> 
<head> 
<title> 中 国 目 考 教育 网 后 台 管 理 </title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 





<link href="/css/css.css" rel="stylesheet" type="text/css"> 
</head> 
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> 
<table width="100%" border="0" cellpadding="0" cellspacing="0" background="/images/titles.gif"'> 
<tr> 
<td width="81%" valign="bottom"><table width="80%" border="0" cellspacing="0" cellpad 
ding="8"> 
<tr> 
<td width="29%" align="center" valign="bottom" class="admin-title"> 用 户 管理 </td> 
<td width="71%" valign="bottom"></td> 


</tr> 
</table></td> 
<td width="19%"><1img src="/i1mages/spacer.gif" width="1" height="30"></td> 
</tr> 
</table> 
<table width="100%" border="0" cellpadding="0" cellspacing="0" > 
<tr> 
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<td bgcolor="#D9D9D9"><1mg src="/images/spacer.gif" width="1" height="1"></td> 
</tr> 
<tI> 
<td bgcolor="#E8E8E8"><1mg src="/images/spacer.gif" width="1" height="1"></td> 
</tr> 
</table> 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td>&nbsp;</td> 
</tr> 
</table> 
<table width="98%" border="0" align="center" cellpaddine="1" cellspacine="1" bgcolor="#FFFFFF" 
class="rightA"> 
<form name="form1" method="post" action="user update.asp">// 单 击 提 交 按 钮 后 转 到 user update. 
asp 页 面 
<tr bgcolor="#FFFFFF"> 
<td colspan="3" align="center"><table width="100%" border="0" cellspacing="0" 
cellpadding="0"> 
<tr> 
<td align="left" background="/images/td title01.gif" class="fontl4px"><font color="#FF 
FFFF">&nbsp; énbsp;</font></td> 
<td width="2%" background="/images/td tttle01l.gif ><limg src="/images/td title01.g1f" 
width="8" height="27"></td> 
</tr> 
</table></td> 
</tr> 
<tr bgcolor="EBF2F6"> 
<td width="3%" align="center"><font color="1AA9D7"> 国 一 font></td> 
<td width="7%"> 用 户 名 </td> 


<td width="90%"><input name="name" type="text" class="registe" slZe="35" 
value="<%=rs("name")%>"></td> 
</tr> 


<tr bgcolor="#FFFFFF"> 
<td align="center" valign="top"><font color="1 AA9D7"> 国 </font></td> 
<td valign="top" bgcolor="#FFFFFF"> 是 否 付 费 </td> 
<td><input name="pay" type="text" class="registe" slize="35" Value= "<Yo=TS(" pay"”)Y%o>"” > 
<input name="user 1d" type="hidden" value="<%=rs("UserID")%>"></td> 
</tr> 
<tr bgcolor="#FFFFFF"> 
<td colspan="3" class="fenlei"><1img src="../images/Spacer.gif" width="1" height="5"></td> 
</tr> 
<tr align="center" bgcolor="#FFFFFF"> 
<td colspan="3" class="fenlei"><input name="Submit" type="submit" class="registebt" value=" 
提交 "> 
&nbsp; <input name="Submit2" type="reset" class="registebt" value=" 清 ” 除 "></td> 
</tr> 


</form> 


</table> 
<br> 

<br> 
</body> 
</html> 

<% 

rs.close 

set rs=nothing 者 
conn.close 睛 了: 


set conn=nothing %o> 


(2 ) 用 户 付费 更 新 
该 页 面 是 实现 付费 字段 值 的 更新 程序 ， 代 码 设 计 如 下 。 


<!--#include file="../config.asp"--> 
<% 
if request("user 1d")<—"" then 
"1f session("user prop")="admin" then 
set rs=server.createobject("adodb.recordset") 
sql="update 资料 表 set pay="&request.Form("pay")&" where UserID="&CInt(request 
("user 1d")) 
rs.open Sql,conn,1 ,1 
Err.Number>0 then 
response.write "对 不 起 ， 数 据 库 处 理 有 错误 ， 请 稍 候 再 试 .… 
response.end 
else 
response.redirect "user admin.asp" 
end 1f 
'end 1f 
end 1f 
rs.close 
set rs=nothing 
conn.close 
set conn=nothing 


900> 


到 这 里 ， 教 育 网 的 学 员 注册 及 后 合 的 管理 介绍 就 已 经 完毕 ， 对 于 整个 网 站 的 基本 功能 都 
已 经 实现 。 自 考 教 育 网 还 有 一 个 比较 独立 的 系统 BBS3， 由 于 该 系统 在 网 站 建设 的 时 候 都 可 以 
直接 引用 现成 的 模板 ， 而 且 BBS 都 比较 复杂 庞大 ， 在 这 里 就 不 做 具体 的 分 析 ， 读 者 可 以 打开 
站 点 中 的 BBS 文件 夹 进行 浏览 参考 。 其 他 的 谍 件 开发 部 分 也 是 使 用 其 他 软件 进行 独立 开发 ， 
如 用 Flash 制作 教学 如 件 ， 然 后 链接 到 相应 的 功能 页 向 邑 可 。 


Zll 


电子 两 务 网 站 的 建设 


在 兼职 的 时 候 会 发 现 很 大 一 部 分 客户 都 会 要 求 制 

作 电子 商务 网 站 ， 因 为 现在 因特网 上 电子 商务 的 趋势 

有 目 共 睹 ， 做 为 兼职 技术 人 员 掌握 一 套 常 用 的 电子 商 

务 网 站 程序 也 是 必要 的 。 本 章 就 介绍 商务 实用 型 网 站 - 

的 建设 ， 通 过 购物 车 实现 电子 商务 功能 。 电 子 购物 时 
| 下 已 成 为 网 站 建设 最 热门 的 话题 ， 商 务实 用 型 网 站 是 
比较 庞大 的 一 个 系统 ， 它 必须 拥有 会 员 系 统 、 查 询 系 

统 、 购 物流 程 、 会 员 服务 、 后 台 管 理 等 功能 模块 ， 这 


< 


样 于 个 网 站 的 开 友 工作 量 是 庞大 的 。 
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7.1 电子 商务 网 站 功能 分 析 


电子 购物 网 站 的 核心 技术 在 于 “购物 车 ”部 分 ， 包 售 了 一 个 基于 WWW 的 购物 系统 ， 这 里 
使 用 最 简单 易学 的 ASP+Access 技术 制作 而 成 ， 这 样 可 以 降低 学 习 的 难度 ， 让 读者 迅速 掌握 
电子 购物 网 站 的 建设 知识 。 下 面 就 开始 许 细 介绍 这 个 电子 购物 网 站 的 制作 方法 ， 也 是 本 章 的 
一 个 完整 的 示例 。 A 个 比较 庞大 的 系统 ， 它 必须 拥有 会 员 系统 、 查 询 系 统 、 
购物 流程 、 会 员 服 务 、 后 合 管理 等 功能 模块 。 为 了 能 系统 化 地 介绍 商务 实用 型 网 站 的 建设 过 
程 ， 本 章 将 以 北京 京 美文 仪 网 上 购物 网 站 的 建设 开发 过 程 为 例 | 详细 介绍 商务 实用 型 网 站 建 
设 中 如 果 想 拥有 一 个 网 上 购物 系统 必须 做 哪些 具体 的 工作 。 


7.1.1 系统 功能 分 析 


商务 实用 型 网 站 ， 是 在 网 络 上 建立 一 个 虚拟 的 购物 商场 ， 让 浏览 者 在 网 络 上 进行 购物 行 
为 。 网 上 购物 以 及 网 上 商店 的 出 现 ， 避 免 了 挑选 商品 的 繁琐 过 程 ， 让 人 们 的 购物 过 程 变 得 轻 
松 、 人 快捷 、 方 便 ， 很 适合 现代 人 快 节奏 的 生活 方式 ， 同 时 又 能 有 效 控制 “商场 ”运营 的 成 
本 ， 开 辟 了 一 个 新 的 销售 渠道 。 本 章 实 例 网 站 的 购物 系统 首页 如 图 7-]1 所 示 。 
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国 图 /-1 开发 设计 的 购物 系统 首页 效果 


对 于 该 网 站 的 ， 小 析 如 下 。 
采取 会 员 制 、 刁 份 一 系列 措施 ， 保 证 交易 的 安全 性 。 
询 功能 ， 能 够 快捷 地 找到 感 兴 趣 的 商品 。 
) 会 员 购 物流 程 : 浏览 、 a ra 去 收银 合 。 每 个 会 员 有 自己 专用 的 购物 
oo 
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主要 依据 ， 设 计 的 购物 流程 如 图 /7-2 所 示 。 





才 量 
i 送 货 上 门 
图 7-2 购物 流程 设计 


完善 的 会 员 服 务 功 能 : 可 随时 查看 账目 明细 、 订 单 明 细 。 
) 设计 特价 商品 展示 ， 能 够 展示 企业 近期 所 促销 的 一 些 特价 商品 。 
1 a 等 理 使 用 本 地 数据 库 ， 与 因特网 上 的 数据 库 实 时 同步 ， 保 证 购物 订单 安全 及 时 
有 效 处 理 并 具有 强大 的 统计 分 析 功 能 ， 便 于 管理 者 及 时 了 解 财务 状况 、 销 售 状况 ， 把 握 客 户 
J 


7.1.2 ”功能 模块 构成 


首先 分 析 购 物 车 系统 的 组 成 结构 ， 前 提 是 该 购物 车 系统 基于 ASP+Access 结构 ， 也 就 是 
说 ， 使 用 Access 数据 库存 储 有 关 数 据 ， 使 用 ASP 访问 数据 库 (可 以 是 本 机 访问 ， 也 可 以 是 远 
程 访问 ) 并 进行 产品 列表 、 显 示 、 增 加 等 操作 。 设 计 的 功能 模块 流程 如 下 。 
首先 ， 客 户 端 浏览 器 送出 HTTP 访问 请 求 ，WWW 服务 器 收 到 请 求 以 后 ， 判 断 是 否 需要 后 
数据 库 理 询 ， 如 果 需 要 则 生成 sql 查询 指令 ， 并 送 到 数据 库 服务 器 中 。 这 部 分 功能 主要 由 
ASP 程序 实现 。Access 数据 库 服务 器 收 到 相应 端口 送 来 的 盘 询 请 求 以 后 ， 进 行 数 据 库 、 表 
的 操作 ， 以 表单 形式 向 查询 者 返回 查询 结果 。 最 后 ，WWW 服务 器 收 到 查询 结果 ， 使 用 其 中 
的 数据 生成 标准 的 HTML 页 面 ， 并 将 HTML 代码 返回 给 原 访问 者 。 这 部 分 功能 同样 由 ASP 编 
程 实现 。 
通过 上 和 对 电子 购物 系统 功能 的 分 机 ， 了 网 上 购物 商城 型 鸭 网 站 主要 由 如 下 功能 模块 组 成 。 
(1 ) 前 合 网 上 和 销售 模块 。 所 谓 前 合 网 上 销售 模块 ， ee 
ee 包括 浏览 商品 、 订 购 商品 、 吾 询 订 购 、 购 物 车 等 功能 。 
合 数据 录入 模块 。 前 合 所 销售 商品 的 所 有 数据 ， 其 来 源 we 
模块 。 所 谓 后 合 数据 处 理 ， 是 相对 于 前 合 网 上 销售 模块 而 言 ， 
0 都 放 在 销售 数据 库 中 ， 对 这 部 分 的 数据 进行 处 理 ， 是 后 合 数据 处 理 模块 
的 功能 。 
(4 ) 用 户 注册 功能 模块 。 用 户 并 不 一 定 立 即 就 要 购买 商品 ， 可 以 先 注 册 ， 任 何 时候 都 可 
以 来 购买 商品 。 用 户 注册 的 好 处 在 于 选 购 商品 后 无 顷 输入 一 大 堆 个 人 信息 ， 只 需 将 账号 和 密 
) ? 单 号 模块 。 所 谓 订 单 号 模块 ， 就 是 客户 购买 完 商 品 后 ， 系 统 自动 分 配 一 个 ?订单 号 
ws 以 方便 客户 随时 查询 订单 处 理 情况 ， 了 人 解 现在 货物 的 状态 
) 促销 价 模 块 。 当 有 促销 价 时 ， 结 算是 以 促销 价 为 准 。 如 没有 促销 价 ， 则 以 正常 的 价 


格 为 准 ， 使 用 户 能 得 到 详细 的 信息 ， 真 正 做 到 处 处 为 用 户 着 想 。 
7.1.3 页 面 设 计 规 划 


在 制作 网 站 之 前 首先 是 把 设计 好 的 网 站 内 容 放置 在 本 地 设计 计算 机 的 硬盘 上 ， 为 了 方便 
妆 凡 的 设计 及 上 传 ， 设计 好 的 网 页 都 应 存储 在 一 个 目录 下 ， 册 用 合理 的 文件 夹 来 绾 理 文档 。 
在 本 地 站 加 中 应 该 用 文件 夹 来 合理 构建 文档 的 结构 。 首 先 为 六 护 创 建 一 个 主要 文件 来 ， 然 后 
在 其 中 再 创建 多 个 子 文件 夹 ， 最 后 将 文档 分 类 和 存储 到 相应 的 文件 来 下 。 读 者 可 以 打开 光盘 中 
的 素材 ， 但 看 第 7 章 的 站 扣 文 档 结构 及 文件 夹 结构 ， 将 要 设计 完成 的 结构 如 图 7-3 所 示 。 


篇 asp 
: 文件 到 编辑) 查看 WD 收 诚 ) 工具 (1) 帮助 0 
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国 图 7-3 制作 网 站 文件 的 结构 


下 面 从 站 操 规 划 的 文件 夹 及 完成 的 页 面 出 发 ， 分 别 对 需要 设计 的 页 面 功能 进行 如 下 分 析 。 

(1 ) 站 挟 文 件 夹 下 的 4 个 文件 及 功能 分 别 如 下 。 

index.asp: 用 于 实现 购物 系统 首页 的 页 面 。 

config.asp: 人 被 相关 的 动态 页 面 调 用 ， 用 来 实现 数据 库 连 接 。 

left_menu.asp: 首页 左边 会 员 系 统 及 购物 搜索 功能 组 成 的 动态 页 面 。 单 独 和 制作 也 是 为 
了 方便 其 他 动态 页 面 的 调用 。 

main_menu.asp: 网 站 的 导航 条 。 对 于 一 个 网 站 来 说 ， 经 常 要 修改 栏目 ， 由 于 做 好 的 网 
站 页 而 很 多 ， 不 可 能 每 一 个 页 面 都 进行 修改 ， 所 以 用 ASP 语言 建立 一 个 单独 的 页 向 ， 通 过 调 
用 同一 个 页 面 实 现 导航 条 的 制作 ， 这 样 修改 起 来 很 方便 。 

( 2 ) about_us 文件 夹 放置 关于 企业 介绍 的 一 些 内 容 ， 页 面 只 有 一 个 。 

about_us.asp: 关于 企业 的 内 容 简介 页 面 。 

(3) admin 文件 夹 放 置 的 是 关于 整个 网 站 的 后 全 管理 文件 内 容 ， 又 分 别 包 括 了 
news_admin、order_admin 和 product_admin3 个 子 文件 夹 。 这 一 个 模块 是 购物 系统 中 的 难 
点 和 重点 。 

@ news_admin 文件 夹 是 放置 后 合 新 闻 管 理 的 页 面 。 
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@ order_admin 文件 夹 是 放置 后 合 订 单 处 理 的 一 些 动 态 页 向 ， 其 中 分 别 放置 了 如 下 5 个 
动态 页 面 。 

del_order.asp: 删除 订单 。 

mark_order.asp: 标记 已 处 理 订单 。 

order_list.asp: 后台 客 户 订 单列 表 。 

order_1ist_mark0.asp， 未 处 理 客户 订单 列表 。 

order_list_markl.asp: 已 处 理 客 户 订 单列 表 。 

@ product_admin 文件 夹 用 来 放置 商品 管理 的 页 面 ， 主 要 包括 了 如 下 9 个 动态 页 面 ， 这 
是 购物 系统 的 重点 和 难 吕 ， 阔 及 上 传 图 片 等 高 难度 编程 操作 。 

del_product.asp: 删除 商品 页 面 。 

insert_product.asp: 插入 商品 页 和 而。 

product_add.asp: 添加 商品 信息 页 和 面 。 

product_list.asp: 后 合 管理 商品 列表 。 

product_modify.asp: 更 新 商品 信息 页 面 。 

update_product.asp: 建立 上 传 命令 动态 页 面 。 

upfile.asp: 上 传 文件 测试 动态 页 面 。 

upfile.htm: 上 传 图 片 文件 静态 测试 页 面 。 

upload_5xsoft.inc， 上 传 文件 ASP 命令 模版 。 

@ check_admin.asp 用 于 判断 后 合 登录 管理 身份 确认 的 动态 文件 。 

(4) client 文件 夹 用 来 放置 客户 中 心 的 内 容 页 面 ， 也 只 有 一 页 。 

client.asp: 制作 与 购物 相关 的 一 些 说 明 。 

(5 ) imgaes 文件 夹 放 置 网 站 建设 的 一 些 相 关 图 片 。 

(6) incoming_img 文件 夹 放置 商品 的 图 片 。 

(7 ) mdb 文件 夹 用 来 放置 网 站 的 Access 数据 库 ， 所 有 的 购物 信息 及 数据 全 放 在 这 里 。 

(8 ) member 文件 夹 放置 网 站 会 员 的 一 此 相关 页 面 ， 主要 包括 如 下 的 动态 页 面 。 

login.asp: 注册 登录 页 面 。 

logout.asp: 注册 失败 页 面 。 

registe.asp: 填写 注册 信息 的 页 面 。 

registe_know.asp: 注册 须知 说 明 页 面 。 

( 9 ) news 文件 夹 用 来 放置 网 站 新 闻 中 心 的 一 些 动态 页 面 ， 主 要 包括 如 下 的 动态 页 面 。 

news_content.asp: 新 闻 细 节 页 面 。 

news_list.asp: 显示 所 有 新 闻 列 表 页 面 。 

( 10 ) order_search 文件 夹 用 来 放置 用 户 订 单 至 询 的 一 些 动 态 页 面 ， 主 要 包括 如 下 两 个 


动态 幢 面 。 


order_search.asp: 用 户 订 单 查 询 输 入 页 面 。 

your_order.asp: 用 户 订 单 查询 结果 页 和 面 。 

( 11 ) product 文件 夹 用 来 放置 与 销售 商品 相关 的 页 面 ， 主 要 包括 如 下 3 个 动态 页 而 。 
all_list.asp: 所 有 商品 罗列 页 面 。 

product.asp: 商品 细 贡 页 面 。 


search_result.asp: 商品 搜索 结果 页 面 。 

( 12 ) service 文件 夹 用 来 放置 售后 服务 的 一 些 说 明 页 面 ， 主 要 有 一 个 说 明 页 面 。 

service.asp: 用 来 说 明 售 后 服务 的 页 向 。 

( 13 ) shop 文件 夹 主 要 用 来 放置 结算 的 一 些 动态 页 面 ， 主 要 包括 如 下 5 个 动态 页 面 。 

add2bag.asp: 统计 YJ 单 商品 数量 的 动态 页 面 。 

clear_bag.asp: 清除 订单 信息 的 页 面 。 

order.asp: 订单 确认 信息 页 面 。 

order_sure.asp: 订单 最 后 确认 页 面 。 

shop.asp: 订单 用 户 信息 确 认 页 面 。 

( 14 ) style 文件 夹 用 来 放置 页 面 的 CSS 文件 。 

index.css 用 来 控制 页 面 属性 的 CSS 样式 文件 。 

从 上 面 的 分 析 统 计 可 以 看 出 该 网 站 总 共 由 近 45 个 页 面 组 成 ， 涉 及 了 动态 网 站 建设 中 几 
乎 所 有 的 功能 设计 。 其 中 的 用 户 注 册 系 统 、 新 闻 系 统 已 经 在 前 面 的 章节 介绍 过 ， 本 章 重 点 介 
绍 网 上 购物 系统 相关 页 面 的 分 析 与 设计 。 


7.2 系统 数据 库 设 计 


网 上 购物 系统 的 数据 库 比 较 上 庞大， 在 设计 的 时 候 需 要 从 使 用 的 功能 模块 入 手 ， 可 以 分 别 
创建 不 同 命 名 的 数据 表 ， 命 名 的 时 候 也 要 与 使 用 的 功能 命名 相配 合 ， 方 便 后 面相 关 页 面 设计 市 
作 时 的 调用 。Access 数据 库 的 设计 方法 在 前 血 的 章 厂 中 也 介绍 过 很 多 次 ， 本 章 廊 将 要 完成 的 数 
据 库 命名 为 DBwebshop.mdb， 在 数据 库 中 建立 7 个 不 同 的 数据 表 ， 如 图 /-4 所 示 。 











7]-4 建立 的 数据 库 


对 于 各 数据 表 的 分 析 如 下 。 
(1 ) 商品 表 是 存储 商品 的 相关 信息 和 表 ， 设 计 的 商品 数据 表 如 图 /-5 及 表 /1 所 示 。 


217 























™. 习 商 品 表 口 回 史 
ED 自动 编号 s 
商品 名 称 文本 
商品 编码 文本 
茶 码 文本 
零 虞 价 文本 

地 文本 
单位 文本 
格 文本 
品 图 片 文本 
和 字段 属性 _ 
| 守 规 估 网 
子 本 大 长 要 到 
新 值 详 语 
格式 
标题 
这 引 有 (无 琶 复 ) 
和 能 行 记 
; 字段 名 称 最 长 可 到 64 个 字符 (包括 空格 )。 
文本 对 齐 等 规 Fl 
国 图 7-5 设计 的 商品 表 
| 表 7-1 商品 数据 设计 表 
| 意 义 字段 名 称 数据 I 字段 大 小 必 填 字段 ”允许 空 字 符 串 说 明 
人 站 
商品 ID 商品 ID 自动 编号 长 整 型 
| 商品 名 称 商品 名 称 文本 255 香 否 
| 商品 编码 商品 编码 文本 255 否 是 
条 码 条 码 文本 255 否 是 
零售 价 零售 价 文本 255 nn 征 
产地 产地 文本 255 否 是 
单位 单位 文本 255 否 是 
规格 规格 文本 255 盏 是 
宵 品 网 片 有 上 品 图 片 文本 50 盏 是 
子 类 别 ID 子 类 别 ID 文本 50 否 是 
根 类 别 ID 根 类 别 ID 文本 50 否 十 
在 架 状 态 在 架 状 态 文本 50 否 是 0 表示 缺 货 ，1 表示 在 架 
主页 推荐 主页 推荐 文本 50 否 是 1 表示 推荐 
商品 说 明 商品 说 明 备注 否 是 








、 





(2 ) 商品 主 类 别 表 ， 是 把 商 后 请 下 x 











品 进行 分 类 后 的 一 级 类 别 表 。 主 


il 


主 类 别名 称 交 走 


特 
党 
而 
开 








i 要 设计 了 “ 主 类 别 ID” 和 “ 主 类 
| 等 规划 
别名 大 oR 两 个 字段 名 称 ， 企业 可 ey [50 ^ 


格式 己 


”| 以 根据 需要 展示 的 商品 种 类 ， 在 | 演 要 
数据 表 中 加 2 商品 口 口 的 类 2 另 | y 如 i 字段 名 称 最 长 可 到 64 个 字符 (包括 空格 )。 按 


肥效 性 文本 Fl 名 可 鸽 竹 有 关 字 段 饼 称 的 帮助。 
/一 6 所 示 。 i 
Co ee 人 Unicaas EE 
类 别 | 表 i 2 


mh | 上 -一 





六 基 计 项 荐 
oh 
lll 
wl 


加 


-并 


品 进行 分 类 后 的 二 


只 


























要 设计 了“ 子 类 Sr | 
名 称 ” 及 “ 主 类 别 ID ”三 个 字段 
名 称 ， 根 据 需 要 展示 的 许 细 商品 种 类 ， 在 数据 表 中 加 入 商品 的 名 称 


国 图 7-6 建立 的 商品 主 类 别 表 





如 图 7-7 所 示 。 
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图 产品 子 类 别 


类 别名 称 
| 主 类 别 ID 


Unicode 夺 缩 
输入 法 模式 
输入 法 语句 模式 
乱 论 标记 





表 /7-2 所 示 。 


订单 序列 号 
订单 ID 
用 户 名 
订单 日 期 
是 否 处 理 
收 货 人 
送 货 地 址 
联系 电话 
手机 
电子 邮件 
附 言 











字段 名 称 最 长 可 到 64 个 字符 (包括 空格 )。 按 
Fl 链 可 得 在 有 关 字 段 名 称 的 帮助 。 


恒 图 7-7， 设计 的 商品 子 类 别 表 
(4) 洒 单 数据 表 是 存储 网 上 用 户 订 购 相 关 信 息 的 表 ， 设 计 的 订单 数据 表 如 图 7-8 及 








字 积 党 明 旺 可 这 和 的。 用 于 上 表 购 沉 明 流 字段 , 而 








有 交尾 规则 ds 和 
Ne ee 
4 去 二 助 。 
次 放 宇 享 各 可 雷 
索引 无 
Unicode 丘 洛 各 
膏 入 流 模 元 开局 
按 入 法 生 司 异 式 Ea 
芹 甘 标记 Y 
国 图 7-8 订单 数据 表 
表 7-2 订单 数据 设计 表 
字段 名 称 数据 类 型 字段 大 小 ” ” 必 填 字段 ”允许 衬 字 符 串 说 明 
订单 序列 号 ”自动 编号 长 整 型 
订单 ID 刻本 50 是 否 生成 一 个 随机 数 来 表示 同一 批 的 订单 
用 户 名 文本 50 是 人 否 
订单 日 期 文本 50 否 是 20040608 表示 2004 年 6 月 8 号 
是 否 处 理 文本 50 否 是 1 表示 已 处 理 ，0 表示 未 处 理 
收 贷 人 文本 50 否 是 
送 货 地 址 文本 50 否 是 
联系 电话 文本 50 否 是 
手机 文本 50 否 是 
电子 邮件 文本 50 于 是 
附 言 文本 255 否 是 
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虹 
中 
型 
汶 
当 
rT 
于 
本 
xp 





Cub 


5 ) 订单 商品 表 ， 是 记录 用 户 在 网 上 ?订购 的 商品 信息 表 ， 用 于 用 户 在线 得 询 订 单 。 主 
计 了 “订单 商品 ID"、* 订 单 0"、* 商 品 10” 及 “订购 数量 ”4 个 字段 名 称 ， 如 图 7--9 所 示 。 
| 国 订 单产 品 | 
说 明 











川 ) 


六 ID 文本 








字段 层 性 











7 字段 名 称 最 长 可 到 64 个 字符 (包括 空格 )。 按 
文本 对 齐 第 规 F1 链 可 膏 才 有 关 字段 全 称 的 示 助 。 






































7-9 设计 的 订单 商品 表 
| ) 新 闻 表 ， 是 存储 新 闻 用 的 数据 表 。 主 要 设计 了 “新 闻 ID”"、“ 新 闻 标题 "、“ 新 闻 出 
| oo a 个 字段 名 称 ， 如 图 7-10 所 示 。 


| 团 新 闻 雪 


数据 类 型 说 角 
自动 编号 


新 闻 标 题 文本 








0 
四 
my| % 


文本 
新 闻 日 期 文本 
字段 恒 性 








等 规 齐 阅 

字段 大 小 长 整 型 

Bal 递送 

格式 

索引 误 ( 无 重复 ) 

二 Cr 字段 名 称 最 长 可 到 64 个 字符 (包括 空格 )。 按 
本 Fl 链 可 坦 看 有 关 字 段 名 称 的 帮助 。 









































7-10 设计 的 新 闻 表 


) 用 户 表 是 存储 注册 用 户 信息 的 数据 表 。 主 要 设计 了 “用 户 ID 和“ 用 户 名 和” “ 密 
人 
] 个 字段 名 称 ， 如 图 7-11 所 示 。 

对 于 网 上 购物 系统 的 数据 库 设 计 并 不 是 一 成 不 变 的 ， 在 设计 好 功能 页 面 后 ， 要 根据 功能 
要 求 来 设计 不 同 的 数据 表 。 上 向 设计 的 数据 表 属 于 较 复 杂 的 数据 表 ， 可 以 应 用 于 较 大 的 网 上 
购物 系统 。 
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主要 以 




















口 回 下 
说 明 二 
字段 屠 性 
等 规 曹 阅 
字 良 六 小 长 蓉 弄 
格式 
标 氨 
这 引 育 ( 无 琶 复 ) 
CE 字段 名 称 最 长 可 到 64 个 字符 (包括 空格 )。 按 
Rs Fl 键 可 查看 有 关 字 段 名 称 的 帮助 



































量 图 7-11 设计 的 用 户 表 


7.3 和 目 页 的 设计 


首先 分 析 设计 购物 系统 站 点 文件 夹 下 的 4 个 文件 。 一 个 购物 系统 需要 一 个 主页 面 来 给 用 
户 进 行 注册 、 搜 索 需 要 采购 的 商品 、 网 上 浏览 商品 等 操作 。 首 页 index.asp 主要 由 
config.asp、 ieft_ menu.asp、main_menu.asp3 个 页 和 面 组 合 而 成 ， 所 以 在 设计 首页 之 前 先 要 完 
成 这 3 个 页 面 的 设计 与 分 析 制 作 。 在 这 里 还 要 指出 的 是 ，style 文件 夹 里 的 index.css 文件 ， 
它 是 用 来 控制 页 面 属 性 的 CSS 样式 文件 ， 通 过 这 个 文件 可 以 统一 整个 网 站 的 界面 风格 。 


7.3.1 数据 库 连 接 


用 ASP 开发 的 网 站 ， 
几乎 都 是 通过 config.asp 
文 个 页 面 来 实现 网 站 数据 
库 的 连接 。 页 面 比较 简 
单 ， 就 是 设置 数据 库 连 接 
的 基本 命令 ， 如 图 7-12 
所 未。 

对 于 本 连接 的 程序 说 
明 如 下 。 





和 D:\dreazweaver\ 光 盘 \source\noT\site\config. asp (XHTML) - 口 X 
<WG@LANCUACE= YESCRIPT CODEPAGE=" 936"%> 
《和 


cormst 三 -DBQ= Fe mappath't" /mdb/DBwebshop. mdb" )+ 
“ .DefaultDir=:DRIVER= {Microsoft Access Driver (*.mdb)}:" 
set corm=server. createobject (" ADODB. CONNECTION") 
Corm. open cormstr 
六 > 














<%WLANGUAGE= 1 kK / 1 秒 简体 中 文 (5B2312) 
er 图 7-12 设置 数据 库 连接 
"936"0%%> 


Ss 


| : 





Zl 


<% 

/以 下 为 数据 库 连 接 代码 
connstr="DBQ="+server.mappath("/mdb/DBwebshop.mdb")+"; 
/设置 DBO 服务 器 物理 路 径 
DefaultDir=;DRIVER={Microsoft Access Driver (*.mdb)};" 
/定义 为 Access 数据 库 

set conn=server.createobject("ADODB.CONNECTION") 

// 设 置 为 ADODB 连接 


conn.open connstr 


/打开 数据 库 


900> 


7.3.2 用户 及 搜索 


购物 网 站 需要 ee se 一 般 都 是 通过 用 户 自 届 的 登 
录 、 浏 览 、 订购、 绪 算 这 样 的 流程 来 实现 网 上 购物 。 同 时 需要 加 入 搜索 功能 ， 以 方便 用 户 在 
nu 所 以 在 首页 的 左边 栏 上 需要 建立 
用 户 登 录 系 统 、 购 物 生 及 搜索 功能 。 

下 而 由 功能 出 发 ， 分 别 分析 设计 各 功能 模块 。 

(1 ) 首先 分 析 核 心 部 分 即 购 物 车 系统 ， 该 功能 模块 完 
成 后 如 图 /-13 所 示 。 该 购物 车 系统 主要 有 写 入 用 户 名 、 
统计 购物 车 的 商品 、 统 计 商 品 总 价值 、 清 空 购物 车 、 链 接 
到 结算 功能 页 面 这 几 个 主要 的 小 功能 。 看 图 7-13 ”完成 的 购物 车 用 户 系统 

| (2 ) 此 段 程序 代码 如 下 所 示 。 


<table width="80%" border="0" cellspacing="0" cellpadding="2"> 
<tr> 
<td><font color="#FF3300"> 
<% 


if session("user")<>"" then 


CS6 








一 








response.Write(session("user" )) 
else 
response.Wriite(" 沂 客 风 
end 1f 
a 07> 
// 这 段 程序 的 意思 是 如 末 用 户 登录 了 则 写 入 用 户 名 ， 如 果 没 有 登录 则 写 游 客 
</font><font color="1A3D05">， 欢 迎 你 ! </font></td> 











</tr> 
<tr> 
<td><font color="1A3D05"> 购 物 车 中 共有 <font color="#FF3300"> 
% 
if session("all number")="" then 
00> 


2 


0 
<% 
else 
00>> 
<%=session("all number")%> 
<% 
end 1f 
00> 
/这 段 程序 是 统计 商品 的 总 数量 。 
</fon 人 > 件 商品 </fonf></td> 





</tr> 

<tr> 

<td><font color="1A3D05"> 总 价值 <font color="#FF3300"> 
sy0 
if session("all price")="" then 
00>> 
0 
<% 
else 
00>> 
<%=session("all price")%> 
<% 
end 1f 
900> 

/统计 商品 的 总 价值 。 
</fonf 人 > 元 </font></td> 
</tr> 
<tr> 
<td> 

<% 

if session("all number")="" then 

00>> 





<strong><font color="1A3D0S"> 清 空 购物 车 </font></strong><font color="1A3D05">&nbsp;/&nbsp; 
<strong> 去 结算 </strong></font> 
<% 
else 
90>> 
<a hre 伟 "Shop/clear bag.asp"> 
/这 段 程序 是 调用 clear bag.asp 页 面 功能 实现 清空 购物 车 。 
<strong> 清 空 购物 车 </strong></a>&nbsp;/&nbsp;<a hre 人 "shop/shop.asp"><strong> 去 结算 </strong></a> 
/调用 shop.asp 页 面 进行 结算 。 
<% 


end 1f 

















六 


> 9 
一 </td> 
</tr> 


</table> 


(3 ee 完 在 前 太 的 章 广 有 相关 的 制作 方法 
介绍 ， 这 这 星 就 不 周作 绍 ， 完成 的 效果 如 图 /一 14 所 示 。 


YY 兼职 指导 
用 户 登 录 后 ， 用 户 名 字段 将 被 写 入 前 面 购物 车 的 “用 
六， 册 押 生 天 统 的 几 疡 什 全 娄 末 由 办 入 当 六， 


) 接 下 来 分 析 搜索 ee 
二 | Earc 国 2 全 | 让 用 系 经 
| tag 


计 与 制作 主要 是 通过 sql] 的 查询 语句 来 实现 的 ， 完 成 的 搜 
索 模 块 如 图 7-15 所 示 。 

查询 的 功能 代码 主要 是 向 套 在 一 个 单独 的 表单 
FromSearch 之 间 ， 命 令 如 下 。 

















<% 
时 图 /13 商品 搜索 功能 检 决 setrs class=server.createobject("adodb.recordset") 
sql="select * from 商品 主 类 别 order by 主 类 别 ID" 
rs class.open sql,conn,1,!1 
0%0> 
/建立 sql 查询 语 铅 ， 通 过 商品 主 类 别 及 主 类 别 ID 来 查询 商品 数据 库 
<table width="84%" border="0" cellspacing="0" cellpadding="3"> 
<form name="FromSearch" method="post" action="product/search result.asp" onSubmit="return 
check()"> 
/提交 后 由 search result.asp 页 面 显示 查询 效果 


<tr> 














<td><lmg src="/images/Spacer.gif" width="1" height="6"></td> 
</tr> 
<tr> 
<td><font color="#FFFFFF"> 关键 词 : </font> </td> 
</tr> 
<tr> 
<td><input name="search key" type="text" class="inputl" size="206"> 
/设置 搜索 关键 词 文本 域 
</td> 
</tr> 
<tr> 
<td><font color="#FFFFFF"> 类 ” 别 : </font></td> 
</tr> 


<tr> 
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<td> 
<select name="search class" class="inputl"> 
<option value="" selected>----- 所 有 商品 类 别 -----</option> 
<%for 1=1 to rs class.RecordCount-1%> 
<option value="<%=rs_class(" 主 类 别 ID")%>"><%=rs_class(" 主 类 别名 称 ")%></option> 





<% 
ifrs class.eof then 
exit for 
end 1f 
rs_class.movenext 
next 
rs_class.MoveFirst ' 把 记录 集 游 标 移 到 第 一 条 记录 
0%0> 
</select> 
// 通 过 商品 主 类 别 ID 和 主 类 别名 称 进行 分 类 查询 
</td> 
</tr> 


tr valign="middle"> 
<td><table width="100%" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td><input name="i1mageField2" type= "image" src="/images/index search bt.gif" width="S7" 
height="21" border="0"></td> 
</tr> 
</table></td> 
</tr> 
<tI> 
<td><img src="/images/Spacer.gif" width="1" height="6"></td> 
</tr> 


</form> 


(5 ) 该 页 面 上 还 有 一 些 关 于 商品 的 采购 说 明 及 联系 电话 等 ， 这 些 都 是 静态 功能 ， 如 图 /一 16 
所 未。 


免费 电话 : 
800-81035771 


电话 : 


64375758 





国 图 /-16 采购 说 明 及 联系 电话 
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7.3.3 设计 导航 条 


前 面 介 绍 过 关于 需要 单独 建立 的 导航 条 原因 ， 这 里 将 用 ASP 语言 建立 导航 条 ， 完 成 的 命 
令 如 下 
Ev O 


<% 

if session("user prop")="admin" then 

main menu="<a hre 伟 "> 首页 </a> 

<a href=' /product/all listasp> 采 购 中 心 </a> 

<a hre 仁 vabout us/about us.asp'> 关 于 我 们 </a> 

<a href='/news/news_list.asp 人 > 狐 闻 中 心 </a> 

<a href='/client/client.asp 人 > 客服 中 心 </a> 

<a href='/service/service.asp' > 服务 条 球 </a> 

<a href='/order search/order search.asp 人 > 订单 查询 </a> 
<a href=/admin/news admin/news add.asp 人 > 网 站 管理 </a>" 
else 

main menu="<a hre 伟 "> 首页 </a> 

<a href="/product/all listasp 福 采购 中 心 </a> 

<a hre 仁 /vabout us/about us.asp'> 关 于 我 们 </a> 

<a href='/news/news_list.asp 人 > 狐 闻 中 心 </a> 

<a href='/client/client.asp 人 > 客服 中 心 </a> 

<a href='/service/service.asp' > 服务 条 球 </a> 


<a href='/order search/order search.asp 人 > 订单 查询 </a>" 


end 1f 

90>> 
页 面 设置 了 导航 条 的 内 容 及 链接 情况 ， 并 进行 了 一 先 择 显 示 。 如 果 登 录 者 是 
有 We 行 管理 ， 如 果 不 是 后 合 管 


理 者 则 显示 正常 的 导航 链接 。 
7.3.4 样式 表 设 计 


CSS 能 够 指定 的 样式 类 型 除了 通用 的 颜色 、 了 字体、 背景 等 之 外 ， 还 可 以 控制 字符 间距 、 
填充 距 、 大 小 写 等 50 个 左右 的 样式 ， 显 示 出 强大 的 定义 能 力 。 浏 览 者 想 要 看 的 是 网 页 上 的 
内 容 结构 ， 而 为 了 让 浏览 者 更 好 地 看 到 这 些 信 息 ， 就 要 通过 格式 控制 来 帮 必 以 前 两 者 在 
网 页 上 的 分 布 是 交错 结合 的 ， 查 看 修改 很 不 方便 ， 而 现在 把 两 者 分 开 就 会 大 大 方便 网 页 的 设 
计 者 。 内 容 结 构 和 格式 控制 相 分 离 ， 使 得 网 页 可 以 单 由 内 容 构 成 ， 而 将 所 有 网 页 的 格式 控制 
指向 这 个 CSS 样式 表 文 件 。 

本 实例 的 index.css 样式 代码 如 下 。 


td { 


font-family: "Arial", "Helvetica", "sans-serif"'; 





font-size: 12px; 


text-decoration: none; 


JV 定 义 背景 字体 颜色 、 格 式 、 大 小 


.menu { 
color: #FFFFFF:; 
text-decoration: none; 
padding-right: 12px; 
} 
.menu a:link { 
color: #FFFFFF:; 
text-decoration: none; 
} 
.menu a:visited { 
color: #FFFFFF:; 
text-decoration: none; 
} 
.menu a:hover { 
color: #0C3F00; 


text-decoration: underline; 


} 


.menu a:active { 
color: #FFFFFF:; 


text-decoration: none; 


} 


/上 和 面 这 一 段 定 义 亲 单 框 的 各 种 链接 属性 


.Inputl { 
height: 20px; 


background-color: #D0OESBB; 
border: 1px solid #529527; 


font-family: "Arial", "Helvetica", "sans-serif"'; 


font-size: 12px; 
color: #224F006; 


} 

// 定 义 inputl 样式 

.Input2 { 
height: 20px; 
background-color: #DOESBB; 
border: 1px solid #529527; 
font-family: "Arial", "Helvetica", "sans-serif"'; 
font-size: 12px; 
color: #224F006; 
width: 108px; 

} 

// 定 义 input2 样式 

leftA { 
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color: #FFFFFF:; 
text-decoration: none; 
} 
.leftA a:link { 
color: #224F006; 
text-decoration: none; 
} 
.leftA a:visited { 
color: #224F006; 
text-decoration: none; 
} 
.leftA a:hover { 
color: #FFFFFF:; 
text-decoration: underline; 
} 
.leftA a:active { 
color: #224F006; 
text-decoration: none; 
} 
// 定 义 leftA 的 链接 样式 
TightA { 
color: #707070; 
text-decoration: none; 
》 
rightA a:link { 
color: #707070; 
text-decoration: none; 
} 
rightA a:visited { 
color: #707070; 
text-decoration: none; 
} 
rightA a:hover { 
color: #505050; 
text-decoration: none; 
background-color: #DBDBDB:; 


} 
TightA a:active { 


color: #707070; 


text-decoration: none; 


} 
// 定 义 rightA 的 链接 样式 
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.price { 
color: #FFBC2C: 
font-family: "Arial", "Helvetica", "Sans-Serlf '; 
font-size: 30px; 


text-decoration: none; 


} 
.price-td { 
line-height: 2Spx; 
padding-top: 10px; 
// 定 义 price 的 文字 样式 
} 
.Shu-xu-xian { 
background-1mage: url(../images/index shuxuxian.g1f); 


background-repeat: repeat-y; 


} 
.fenlel { 
color: #427012; 
text-decoration: none; 
， 


.fenlel a:link { 
color: #427012; 
text-decoration: none; 

) 

.fenlel a:visited { 
color: #427012; 
text-decoration: none; 

》 

.fenlel a:hover { 
color: #FFFFFF:; 
text-decoration: underline; 
background-color: #79B43D; 

} 

.fenlel a:active { 
color: #427012: 


text-decoration: none; 


// 定 义 fenlei 的 样式 
.aboutus { 

color: #6666066; 

padding-top: 20px; 

padding-right: 25px; 


2 


padding-left: 23pX; 
padding-bottom: SOpx; 
line-height: 20px; 

} 

.fontl4px { 
font-size: 1 4px; 
font-weight: bolder; 

1/ 定 义 aboutus 文字 样式 

.newscontent { 
font-family: "Arial", "Helvetica", "sans-serif"'; 
font-size: 12px; 
line-height: 18px; 
color: #575757: 
text-decoration: none; 
text-align: justify; 

M/ 定 义 新 闻 页 面 的 样式 

.Teglste { 
border: 1px solid #999999; 

} 

.Teglstebt { 
border-top-width: 1px; 
border-right-width: 1px; 
border-bottom-width: 1px; 
border-left-width: 1px; 
border-top-style: solid; 
border-right-style: solid; 
border-bottom-style: solid; 
border-left-style: solid; 
border-top-color: #FFFFFF:; 
border-right-color: #666666; 
border-bottom-color: #6666606; 
border-left-color: #FFFFFF: 
padding-top: 3px; 
font-size: 1 1px; 
font-family: "Arial", "Helvetica", "sans-serif"'; 
color: #333333; 
text-decoration: none; 
width: 7Spx; 

M/ 定 义 注册 页 面 的 信息 

.Shopinput { 
height: 16px; 
font-family: "Arial", "Helvetica", "sans-serif"'; 


font-size: 1 1px; 
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color: #5DSDSD:; 
text-decoration: none; 
width: 20px; 
border-top: 1px none #999999; 
border-right: 1px none #999999; 
border-bottom: 1px solid #999999; 
border-left: 1px none #999999; 
padding-bottom: 1px; 
padding-left: 1px; 

} 

.Shopbt { 
border-top-width: 1px; 
border-right-width: 1px; 
border-bottom-width: 1px; 
border-left-width: 1px; 
border-top-style: solid; 
border-right-style: solid; 
border-bottom-style: solid; 
border-left-style: solid; 
border-top-color: #FFFFFF:; 
border-right-color: #6666606; 
border-bottom-color: #6666606; 
border-left-color: #FFFFFF: 
height: 18px; 
width: SSpx; 
font-family: "Arial", "Helvetica", "sans-serif"'; 
font-size: 1 1px; 
color: #333333; 
padding-top: 1px; 

WW/ 定义 shop 相关 页 面 的 样式 


Dreamweaver MX 2004 提供 了 对 CSS 样式 创作 的 完美 支持 ， 利 用 Dreamweaver MX 2004， 用 户 不 
需要 了 解 CSS 复杂 繁 殉 的 语法 ， 就 可 以 创建 出 县 有 专业 风格 让 CSS 样式 。 不 仅 如 此 ，Dreamweaver 
MX 2004 还 能 够 识别 现存 文档 中 定义 的 CSS 样式 ， 这 更 方便 用 户 对 现 有 文档 进行 修改 。 


7.3.5 上 自 页 设计 分 析 


index.asp 用 于 实现 购物 系统 首页 的 页 面 ， 在 用 户 通过 IE 栏 输 入 网 站 地 址 后 可 以 直接 打 
开 此 页 面 ， 也 有 些 企 业 制 作 了 网 站 片头 动画， 这 是 用 Flash 开发 的 一 段 动画， 对 于 网 上 购物 
系统 来 说 ， 为 了 提高 访问 速度 一 般 不 建议 使 用 动画 。 

汉 福 兼职 指导 


由 于 在 网 页 设计 过 程 中 需要 应 用 很 多 VBScript 来 实现 一 些 功 能 ， 所 以 本 章 有 些 页 面 的 
编程 应 用 了 ASP VBScript 语句 来 编写 命令 。 
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) 把 光盘 素材 中 的 网 上 购物 系统 复制 到 本 地 计算 机 硬盘 上 ， 用 前 面 所 学 知识 创建 本 地 
EE 本 上 并 设置 主 浏览 页 面 。 
) 双击 【文件 】 面 板 中 的 index.asp 页 面 ， 打 开 的 页 面 效果 如 图 7-17 所 示 。 


一 。 ee 
< 








A DW x# 四 本 靖 呈 查看 中 首 入 (0D 能 滩 (D 着 式 00) 例证 (C0) 站 反 (2) 窗口 人 D 几 绚 0D | Wt [ele 
| ss 

[= CY -tif wp mis pe up inder ers 

FE KD 下 和 人 局 LE a Ch co D2 

te 证 六 OQ 命 坟 站: : 

、 区 


Eers | 
| 

Y 9.40i! 

天 起 | 

全 总 入 网 物语” ); 

区 3 | sD 








国 图 7-17 设计 好 的 index.asp 页 而 


( 3) 该 页 面 的 代码 比较 长 ， 这 里 把 实现 功能 的 一 些 重要 ASP 命令 列 出 说 明 。 将 导航 条 调 
入 如 图 7-18 所 示 的 地 方 加 入 ASP 命令 如 下 。 








加 图 /7-18 导航 条 调 入 位 置 


”| 图。 3 芝 过 员 枉 晤 枉 <%=maln menu%0o> 
"| 上 谍 涉 黑 硬 的 小 鲁 门 J 
h 洒 诬 视 商 委 交 忆 同 上 十 局 开 滑 2? | 
5 // 调 用 main menu.asp 


( 4) 页面 左边 的 内 容 和 left_menu.asp 页 
面 功 能 一 样 ， 这 里 就 不 再 介绍 。 中 间 是 由 新 闻 
系统 和 特价 商品 及 商品 展示 功能 模块 组 成 ， 如 


辆 特产 品 





| ¥ 9.4 E 2 : 图 7 19 人 
全 让 入 罗 御 Am | (5 ) 新 特 商 品 模块 的 代码 比较 简单 ， 大 部 





加 让 毕 彩 色情 证 加 深 砚 单 尔 机 症 py i 
¥ 650 Sz 372 分 是 静态 代码 ， 主 要 是 放 入 购物 车 功能 及 数据 
a pe 库 中 调用 商品 功能 需要 加 入 动态 命令， 所 有 
pt ee |: 个 过 令 如 下 O 
训 流 KM-3530 乒 印 机 于 三 3068 复印机 1 模 各 机 | 
太志 KM 4030 昌 外 村 0 pte er 本 
0 <table width="100%" border="0" cellpadding="0" 
cellspacing="0" class="rightA "> 
7 一 19 商品 展示 模块 <tr> 
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<td width="3%" height="0"><1img src="i1mages/Spacer.gif" width="15" height="13"></td> 
<td colspan="4">&nbsp;</td> 
</tr> 
<tr> 
<td height="329">&nbsp;</td> 
<td width="37%" valign="top"><table width="210" border="0" cellspacing="0" cellpadding="0"> 


<tr> 


<td width="86"><table width="102" border="0" cellpadding="0" cellspacine="1" bgcolor="A6A6A06"> 


<tr> 
<td bgcolor="#FFFFFF"><a href="product/product.asp?productID=3855" target=" blank"> 
// 单 击 特价 商品 的 名 称 能 链接 到 商品 详细 说 明 页 
<lmg src="incoming img/newgoods04.jpg" width="102" height="95" border="0"></a></td> 
</tr> 
</table></td> 
<td width="124" rowspan="2" align="right" valign="top"><table width="92%" border="0" 
cellspacing="0" cellpadding="0"> 
<tr> 
<td width="19%"><img src="images/index title.gif" width="19" height="12"></td> 
<td width="81%"><a hre 人 ="product/product.asp?productID=3855" target=" blank"> 英 雄 高 级 金笔 
</a></td> 
</tr> 
</table> 
<table width="91%" border="0" cellpadding="0" cellspacing="0" > 
<tr> 
<td width="20%" align="left" valign="middle" class="price-td"><1img srce=" 
width="21" height="52"></td> 
<td width="80%" align="right" valign="top" class 
</span><font color="#FFBC2C"><strong> 元 / 文 </strong></font> 
</td> 
</tr> 
</table> 
<table width="92%" border="0" cellspacing="0" cellpadding="0"> 


<tr> 


Images/index m.gif" 


二 1 二 1 


price-td"><span class="price">7.40<br> 


<td allgn="jeft"> 

<a hre 伟 "Shop/add2bag.asp2productID=3833"> 
// 单 击 “ 放 入 购物 车 ”图 标 按钮 链接 到 add2bag.asp 页 面 ， 实 现 放 入 购物 车 的 功能 
<lmg src="images/index dinggou.gif" width="84" height="16" border="0"></a></td> 

</tr> 

</table></td> 

</tr> 

<tr> 

<td>&nbsp;</td> 

</tr> 


2 
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</table> 
<table width="210" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td width="86"><table width="102" border="0" cellpadding="0" cellspacing="1" 
bgcolor="A6A6A0"> 
<tr> 
<td bgcolor="#FFFFFF"><a href="product/product.asp?productID=3468" target=" blank"><img 
src="incoming 1mg/newgoods01.jpg" width="102" height="95" border="0"></a></td> 
</tr> 
</table></td> 
<td width="124" rowspan="2" align="right" valign="top"><table width="92%" border="0O" 
cellspacing="0" cellpadding="0"> 
<tr> 
<td width="19%"><1mg Src= "Images/index title.gif" width="19" height="12"></td> 
<td width="81%"><a href—"product/product.asp?productID=3468" target=" blank"> 中 华 彩 色 铬 笔 
</a></td> 
</tr> 
</table> 
<table width="91%" border="0" cellpadding="0" cellspacing="0" > 
<tr> 
<td width="12%" align="left" valign="middle" class="price-td"><1img src="images/index m.gif" 
width="21" height="52"></td> 
<td width="88%" align="right" valign="top" class="price-td"><span class="price">6.50<br> 
</span><font color="#FFBC2C"><strong> 元 / 文 </strong></font> 
</td> 
</tr> 
</table> 
<table width="92%" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td align="left"><a href—="shop/add2bag.asp?productID=3468"><1mg 
src="1mages/index dinggou.gif" width="84" height="16" border="0"></a></td> 
</tr> 
</table></td> 
</tr> 
<tr> 
<td height="16">&nbsp;</td> 
</tr> 
</table> 
<table width="100%" border="0" cellspacing="0" cellpadding="1"> 
<% 
for 1=1 to 6 
00>> 


<tr> 


<td><img src="1mages/index title.gif" width="19" height="12"></td> 
<td><a hre 人 ="product/product.asp?productID=<%=rs product(" 商 品 ID")%>" 


target=" blank"><%=rs product(" 商 品名 称 ")%> 


/通过 商品 ID 实现 商品 细节 页 product.asp 的 链接 


</a></td> 
</tr> 
<% 
rs product.MoveNext 
next 
00>> 
/用 循环 命令 实现 商品 的 多 列 
</table></td> 


<td width="3%" align="center" valign="top"> 


一 1 


<table width="3" border="0" cellpadding="0" cellspacing="0" class="shu-xu-xian"> 
<tr> 
<td align="right"><1img src="i1mages/Spacer.gif" width="1" height="210"></td> 
</tr> 
</table></td> 
<td width="37%" valign="top"> <table width="210" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td width="86"><table width="102" border="0" cellpadding="0" cellspacing="1" bgcolor="A6A6A6"> 
<tr> 


<td bgcolor="#FFFFFF"><a href="product/product.asp?productID=3951" target=" blank"><img 


src="Incoming img/newgoods02.jpg" width="102" height="95" border="0"></a></td> 


</tr> 
</table></td> 
<td width="124" rowspan="2" align="right" valign="top"><table width="91%" border="0" 


cellspacing="0" cellpaddine="0"> 


<tI> 
<td width="19%"><1mg src="images/index title.gif" width="19" height="12"></td> 
<td width="81%"><a hre 人 ="product/product.asp?productID=3951" target=" blank"> 东 洋 严 光 笔 


</a></td> 


</tr> 

</table> 

<table width="91%" border="0" cellpadding="0" cellspacing="0" > 
<tI> 


二 1 


<td width="11%" align="left" valign="middle" class="price-td"><1img Src= "images 人 index m.gif" 


width="21" height="52"></td> 


<td width="89%" align="right" valign="top" class="price-td"><span class="price">2.50<br> 
</span><font color="#FFBC2C"><strong> 元 / 文 </strong></font> 

</td> 
</tr> 


</table> 
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<table width="92%" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td align="left"><a href—="shop/add2bag.asp?productID=3951"><1img Src= "Images/index dinggou.gif" 
width="84" height="16" border="0"></a></td> 
</tr> 
</table></td> 
</tr> 
<tr> 
<td>&nbsp;</td> 
</tr> 
</table> 
<table width="210" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td width="86"><table width="102" border="0" cellpadding="0" cellspacing="1" 
bgcolor="A6A6A0O6"> 
<tr> 
<td bgcolor="#FFFFFF"><a href="product/product.asp?productID=3890" target=" blank"><img 
src="incoming 1mg/newgoods03.jpg" width="102" height="95" border="0"></a></td> 
</tr> 
</table></td> 
<td width="124" rowspan="2" align="right" valign="top"><table width="92%" border="0" 
cellspacing="0" cellpaddinge="0"> 
<tr> 
<td width="19%"><1mg src="images/index title.gif" width="19" height="12"></td> 
<td width="81%"><a href="product/product.asp?productID=3890" target=" blank"> 派 克 卓 尔 钢 笔 
</a></td> 
</tr> 
</table> 
<table width="91%" border="0" cellpadding="0" cellspacing="0" > 
<tr> 
<td width="14%" align="left" valign="middle" class="price-td"><1img src="1mages/index m.gif" 
width="21" height="52"></td> 
<td width="86%" align="right" valign="top" class="price-td"><span class="price">372<br> 
</span><font color="#FFBC2C"><strong> 元 / 文 </strong></font> 
</td> 
</tr> 
</table> 
<table width="92%" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td align="left"><a href—="shop/add2bag.asp?productID=3890"><1mg 
src="1mages/index dinggou.gif" width="84" height="16" border="0"></a></td> 
</tr> 


</table></td> 
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</tr> 
<tr> 
<td>&nbsp;</td> 
</tr> 
</table> 
<table width="100%" border="0" cellspacing="0" cellpadding="1"> 
<% 
for 1=1] to 6 
090>> 
<tr> 
<td><img src="i1mages/index title.gif" width="19" height="12"></td> 
<td><a hre 人 ="product/product.asp?productID=<%=rs product(" 商 品 ID")%>" 
target=" blank"><%=rs product(" 商 品名 称 /)%></a></td> 


</tr> 
<% 
rs product.MoveNext 
next 
00>> 
</table> </td> 


<td width="20%" align="center" valign="top"> 
<object classid="clsid:D27CDB6E-AE6D-11c{-96B8-4445353540000" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" 
width="108" height="329"> 


一 1 


<param name="movie" value= /incoming img/ad.swf"'> 


一 1 


<param name="quality" value="high"> 


<embed src="/incoming 1mg/ad.swf" quality="high" 


pluginspage="http:/www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" 
width="108" height="329"></embed></object> 








// 骨 入 flash 动态 广告 
</td> 
</tr> 
</table> 
(6 ) 商品 分 类 模块 也 应 用 了 ASP 中 的 for 循环 命令 快速 建立 了 所 有 商品 的 展示 功能 ， 该 
Sm 


<table width="90%" border="0" cellpadding="5" cellspacing="0" class="fenle1"> 
<% 
if (rs class.RecordCount mod 9)=0 then 
line=Int(rs_class.RecordCount/S) 
else 
line=Int(rs class.RecordCountS)+1 
end 1f 


for 1=1 to line 


Zo1 


if (1mod 2)<>0 then 
00>> 
/设置 商品 分 关 显 示 行 数 为 $ 
<tr> 
<td bgcolor="#FFFFFF"> 
<% 
for k=1 to 5 


if rs class.eof then 





exlt for 
else 
00>> 
// 如 果 显 示 了 所 有 的 记录 则 关闭 查询 
<a href="product/all_ list.asp"><%=rs_class(" 主 类 别名 称 ")%></a><imeg src="/images/Spacer.gif"" 
width="6" height="1"> 
// 单 击 商 品类 别名 称 链接 到 all_list.asp 显示 全 部 商品 内 容 页 面 





<% 
rs class.MoveNext 
end 1f 
next 
0%0> 
</td> 
</tr> 
<% 
end 1f 
1!f (1mod 2)=0 then 
0%0> 
<tr> 
<td> 
<% for k=1 to 5 
ifrs class.eof then 
exlt for 
else 
0%0> 


<a href="product/all list.asp"><%=rs_class(" 主 类 别名 称 ")%></a><img src="/images/Spacer.gif"' 
width="6" height="1"> 
<% 
rs class.MoveNext 
end 1f 
next 
00> 
</td> 
</tr> 


<% 
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end 1f 
next 
0%> 


</table> 


(7 ) 以 上 网 上 购物 系统 的 首页 分 析 结 束 ， 如 果 需 要 快 贝 ， 
参考 光盘 中 完成 的 页 面 ， 查 看 代码 ， 可 以 方便 地 完成 企 per 8 计 与 制 人 


7 .4 商品 动态 页 面 六 计 
































入 一 











product 文件 夹 用 来 放置 与 销售 商品 相关 的 页 面 ， 主 要 包 丘 all_list.asp 所 有 商品 
页 面 、product.asp 商品 细 万 页 面 和 search_result.asp 商品 搜索 结果 页 面 。 下 面 分 a 
些 页 面 的 设计 。 


7.4.1 商品 罗列 页 面 


页 面 是 单 击 导航 条 中 的 “采购 中 心 ”或 单 击 首页 上 的 “商品 分 类 ”中 的 商品 内 容 链 接 
a 主要 是 显示 数据 库 中 所 有 的 商品 。 

) 首先 完成 静态 页 面 的 设计 ， 该 页 和 的 核心 部 分 是 “商品 选 购 ”中 商品 二 级 分 类 的 显 
不 ， 0 分 功能 在 首页 设计 中 已 经 介绍 过 ， 完 成 的 效果 如 图 7-20 所 示 。 











EB EA = 了 icrosoft Internet ExzDpLorer 辐 回 因 
: 文件 严 ) 编辑 于 ) 查看 () 收藏 让 ) 工具 他) 大助 册 ) 


ia- 日 四国 各 这 交 mx 对 内因 思 - 和 全国 : 口 盘 汉 


; 地 址 0) | 件 http: 77127.0.0. 1yproduetyall_ 1ist.asp " 轩 革 到 








办 


高 档 办 公用 品 你 还 


所 外 会/ 前 和 多 ! 


首页 | 采购 中 心 关于 我 们 | 新 闻 中 心 | 客服 中 心 | 服务 条 款 | 订单 查询 


商品 选 购 





办 公 机 器 设备 返回 总 分 类 
复印 机 ”一体 机 ”复合 机 ”塑封 机 ” 装 初 机 装订 机 琴 纸 机 变换 机 ”电话 机 子 
母 机 热 敏 传真 机 ”普通 纸 传 真 机 ”流光 忧 真 机 ”计算 器 。” 验 钞 机 ”点 钞 机 ” 收 款 机 
支票 机 ”标价 器 ”保险箱 电脑 ” 啼 墨 打印 机 ”激光 打印 机 ”扫描 世 ”数码 相机 投影 
人 区 ”投影 屏 疑 ”电子 白板 “音箱 考勤 机 带 腓 机 UPS 显示器。” 针 式 打印 机 (票据 
打印 机 ) 宝 气 净化 器 

办 公 机 器 耗材 返回 总 分 类 
碳 粉 ” 磺 鼓 ” 香 印 胶片” 感光 鼓 ”发 动 粉 ” 墨盒 ”打印 腔 片 ”打印 头 ” 色 带 人 苇 真 胶 
片 ”投影 腕 片 ” 过 塑胶 片 ” 考 勤 机 。” 胶 图 ” 铁 线 图 热 熔 腕 带 ”装订 封面 ”标签 带 
墨 轮 ” 色 带 架 ”墨水 ”向 条 ”载体 版 纸 ”油墨 

办 公设 备 周 边 用 品 返回 总 分 类 
磁盘 。” 防 尘 军 ”连接 质 座 ”转换 插座 电 卜 连 线 ”打印 线 “考勤 纸 CD 架 ”磁盘 盒 
DA 清洁 用 品 “CD 盒 CD 包 来稿 器 ” 忧 盘 

始 相 器 材 及 小 电器 





国 图 7-20 设计 的 商品 罗列 页 面 
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( 2 ) 代码 主要 核心 部 分 设计 如 下 。 


<table width="90%" border="0" cellpadding="5" cellspacing="0" class="fenle1"> 

<% 
for 1=1 to rs.RecordCount 

2%0> 
1/ 设置 记录 集 计算 循环 
<tr> 
<td width="79%" bgcolor="#FFFFFF"><strong><%=rs(" 主 类 别名 称 ")%></strong></td> 
/显示 主 类 别名 称 
<td width="21%" align="right" bgcolor="#FFFFFF"><a href="all listasp"> 返 回 总 分 次 
</a>&nbsp;&nbsp;&nbsp;&nbsp;</td> 

</tr> 








<tr> 
<td colspan="2" class="line"> 
<% 
for J=1 to rs_ sub.RecordCount 
ifrs sub.eof then 
rs sub.MoveFirst 
end 1f 
if CInt(rs_sub(" 主 类 别 ID"))=CInt(rs(" 主 类 列 ID")) then 
%> <a href—"search result.asp?sub classID=<%=rs sub(" 子 类 别 ID")%>&name=<%=rs sub(" 子 
类 别名 称 ")%>"> 
<%=rs_sub(" 子 类 别名 称 ")%></a> <% 
end 1f 
rs sub.MoveNext 
next 
200> 
/该 段 程序 是 在 页 面 中 显示 所 有 子 类 别名 称 的 代码 
</td> 
</tr> 
<% 


Avorn 








900> 产品 分 类 


</table> : 呈 :返回 总 分 类 


NNMNMNNMMNNNNNNNNN NN 


|] 口 
We 由 命令 很 ey 如 图 7-21 
所 示 图 7-21 完成 的 商品 选 购 代码 编辑 





7.4.2 ”两 品 细 节 页 面 
购物 系统 中 所 有 商品 都 是 需要 显示 详细 情况 的 ， 接 下 来 就 要 设计 product.asp 商品 








细 市 
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页 面 。 细 节 页 面 要 能 显示 商品 所 有 的 详细 信息 ， 包 括 商 品 价格 、 商 品 产地 、 商 品 单位 及 商品 
同时 要 显示 是 否 在 架 ( 是 否 还 有 商品 )、 放 入 购物 车 等 功能 。 
) 由 所 需要 建立 的 功能 出 发 ， 可 以 建立 如 图 7-22 所 示 的 动态 页 面 ， 页 面 上 的 每 个 
ASP ed 能 。 





DW 文件 (D ”编辑 (E) 查看 WD 插入 (DD) 修改 灿 ”格式 (0) 命令 (CD) 站 点 (5) ”窗口 (D” 才 助 D | | 设计 器 v 


| Adobe BrowserLab | BrowserLab 
bp 





product. asp X D:\dreamweaver\ 光 查 \source\no7T\site\product\product. asp 


ERR config. asp main menu.asp index. css 











动态 尾 性 (a. href) 
动态 尾 性 (img. sre) 








加 am 图 [at 四 图 
和 Gy 名 @| 唱 


HD order_search 

日 - 马 product 

… 同 all_list. asp 

2 product. asp 

i 司 search re... 
Service 


[RIC 865 x 437v 85 K / 2 秒 简体 中 文 (6B2312) 


shop 


国 css | In (I) 链接 LL) 本 所 目标 (@) . 人 config asp 1 . 
页 面 属性 ，， 列表 项 目 iex as ~" 
后 “1 个 不 地 项 目 被 选中 ,总 [ 呈 囊 一 J 














国 图 7-22 完成 的 商品 细节 页 面 


(2 ) 下 面 对 该 模块 的 命令 分 析 如 下 。 


<table width="90%" border="0" cellpadding="5" cellspacing="0" class="fenle1"> 
<tr> 
<td width="44%" bgcolor='#FFFFFF"><strong> 商 品 编码 : <%=rs(" 商 品 编 码 ")%></strong></td> 
<td width="29%" bgcolor="#FFFFFF"> 
<% 
ifrs(" 在 架 状 态 ")=0 then 
else 
0%0> 
<a href="/shop/add2bag.asp?productID=<%=rs(" 疝 品 ID")%>"><imeg src="../images/index dinggou.gif" 
width="84" height="16" border="0"></a> 
<% 
end 1f 
0%0> 
// 如 果 商 品 在 架 ， 单 击 放 入 购物 车 链接 add2bag.asp 页 面 实 现 购物 功能 
</td> 
<td width="27%" align="right" bgcolor="#FFFFFF"> 


视 忌 名 于 网 医 委 于 申 
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2 42 


<% 


ifrs(" 在 架 状 态 ")=0 then 


90> 


<font color="#FF6600"> 抱 头 ! 此 商品 缺 货 ! </font> 


<% 
else 
90> 


font color='"#FF6600"> 在 架 </font> 





/如 果 商 品 在 架 状 态 定 义 值 为 0， 则 显示 “抱歉 ! 此 商品 缺 货 ! ” 
</td> 
</tr> 


<tr valign="top"> 
<td colspan="3" class="line"><table width="100%" border="0" cellpadding="3" cellspacing="0" 
class="rightA "> 
<tr> 
<td width="5%"><1mg src="../images/index title.gif" width="19" height="12"></td> 
<td><font color="#427012"><strong> 疝 品名 称 : </strong></font> 
<%=rs(" 商 品名 称 ")%>// 显 示 商 品名 称 
</td> 





</tr> 

<tr> 

<td bgcolor="#FFFFFF"><1i1mg src="../images/index title.gif" width="19" height="12"></td> 

<td bgcolor="#FFFFFF"><font color='"#427012"><strong> 商 品 售 价 ; </strong></font><%=rs(" 堆 售 








价 ")%> 元 /显示 商品 价格 
</td> 


</td> 


</tr> 

<tr> 

<td><img src="../images/index title.gif" width="19" height="12"></td> 

<td><font color='" 反 27012"><strong> 商 品 单位 : </strong></font><o%=rs(" 单 位 0)%>/ 显 示 商 品 单位 


</tr> 

<tr> 

<td bgcolor="#FFFFFF"><img src="../images/index title.gif" width="19" height="12"></td> 

<td bgcolor="#FFFFFF"><font color='" 州 27012"><strong> 商 品 产地 : </strong></font><%=rs(" 产 地 





")%>// 显 示 商 品 产 地 </td> 


</tr> 
<tr> 
<td class="fenle1"><1img src="../images/index title.gif" width="19" height="12"></td> 


<td><font color="#427012"><strong> 疝 品 说 明 : </strong></font><%=rs(" 商 品 说 明 ")%>/ 显 示 商 员 


说 明 </td> 


</tr> 
<tr> 
<td class="fenjel"><lmg src="../images/index title.gif" width="19" height="12"></td> 
<td><font color="#427012"><strong> 了 出 品 图 片 : </strong></font></td> 
</tr> 
<tr> 
<td class="fenlei">&nbsp;</td> 
<td valign="top"> 
<% 
ifrs(" 商 品 图 刻 ")="" then 
00>> 
<img src="../incoming img/no photo.gif" width="S00" height="186"> 
<% 
else 
00> 
<img src="../incoming img/<%=rs(" 障 总 图 片 ")%>"> 
<% 
end 1f 
200> 
/显示 商品 图 片 
</td> 
</tr> 





<tr> 

<td colspan="2" class="fenlei"><1img src="../images/Spacer.gif" width="1" height="5"></td> 
</tr> 

</table></td> 

</tr> 


</table> 


(3) 了 商品 细 广 页 的 设计 不 是 一 成 不 变 的 ， 该 页 加 实际 是 显示 记录 和 集 的 页 惫 ， 在 实际 操作 
设计 中 需要 建立 数据 库 连 接 ， 建 立 但 询 记 录 集 ， 最 后 绑 定 想 要 显示 的 字段 ， 就 可 以 完成 商品 
细 世 页 的 设计 。 


7.4.3 搜索 结果 页 面 


在 首页 中 有 一 个 商品 搜索 功能 ， 通 过 输入 要 搜索 的 商品 信息 ， 单 击 搜索 按钮 后 打开 的 页 
面 就 是 这 个 商品 的 搜索 结果 页 面 search_result.asp。 该 页 面包 括 的 功能 有 用 搜索 页 传 过 来 
的 字段 搜索 数据 库 中 的 数据 并 显示 该 商品 ， 为 了 方便 购物 ， 在 找到 的 显示 商品 中 还 需要 设置 
商品 的 名 称 、 报 价 、 在 架 状 态 ， 同 时 要 加 入 购物 车 功能 。 在 制作 搜索 结果 页 的 时 候 还 需要 
虑 到 一 个 问题 ， 那 就 是 很 可 能 在 搜索 的 字段 当中 会 有 很 多 商品 相似 ， 如 输入 “打印 机 ”， 那 
么 所 有 数据 中 市 “打印 机 ”三 个 字段 的 所 有 简 品 都 会 列 在 该 页 面 ， 所 以 要 创建 导航 条 还 有 记 
录 统 计 等 功能 。 

(1 ) 由 上 面 的 功能 分 析出 发 ， 设 计 好 的 商品 搜索 结果 页 面 如 图 7-23 所 示 。 
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DW 文件 四 ”编辑 (E 查看 (WD 插入 (修改 全 格式 (0) 命令 (C) 站 点 (3) 窗口 吃 帮助 咱 | | 设计 器 ” 呈 [ 吕 矿 强 


search resulit.asp X D:\dreamweaver\ 光 查 \source\noT\site\product\search_Tesult. asp 


| Adobe BrowserLab | BrowserLab 
config. asp main meru. asp index.css left menu. asp 一 








[实时 代码 | FE 和 [实时 视图 | 检查 | 所作 、 忆 标题 : 床 刘 用 喇 购 熏 | ee 


< [=> [xX) 合 地 址 : file: i /ID | dreamweaver/ Ej/sourcefnoT!site/product/ search res 动态 亲本 [session. all_mumber) 
: m ~ = er . a 动态 女 本 (session. all_price) 
] 动态 属性 (option. value) 
TT 动态 文本 (Request search_ key) 
: | 本 动态 女 本 (Request. name) 
3 动态 属性 (a_ href) 
DD | 动态 尾 性 (a. href 
Re EE : 动态 尾 性 (a. href, Request. name) 
哺 ER : 动态 属性 (a. href, Request. sub_c... 
了 四 : | 动态 尾 性 (a. href, request. searc... 
SA ee i 和 2 2 A 和 SE....... EOI RP OREO PSP OP PR eT ee : | 动态 尾 性 [a. href, request. searc... 
: : : : 员 您 搜索 的 关键 词 是 : {Raquest.search_ksay) 上 暴 {Request.name} :<< 返回 产品 分 类 : EF 动态 属性 (a. href, Request. name) 
:- 曙 : es 动态 尾 性 (a. href, Request. sub_c... 
: 动态 属性 (a. href, request. searc... 
: 动态 属性 (a. href, request. searc... 


session.all_price} Lis : : : : : 
ee WE : 蝴 :0g 加 ;要 放 入 购物 车 : 


Ny 
NUNNVNMNNNNMNNNNNN NN NSssvwsvsvvvvssvvvsvsvsvs < 


: 指 款 ! 您 选择 的 分 类 和 暂时 没有 货物 ， 请 您 电话 与 我 们 联系 ! 


js S|.. NNNNNNNNNNYNNNNNN NN 
. N 
NN 


> 和 : 
Sayvsvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvsvvvvvvvvvvvvvvvvvsv NesvvvvsvvvvvvvvsvvvvvvsvvvvvvvvvvvvvvvvvvvSvvvvvvvsvvvvvvvvvvvvvvv x 
~ ~ 


, 文件 
a | ET 
ee 有 多 C58 人 人 OW 名和 全 | 周 


TS Kd : 中-… 议 order_search 
OO -prodnet 
llist.asp BIB. 


Ss E : : 呈 \ product. asp TI . 


~ 1 search re... 8KB . 
865 x 437v 90 X / 2 秒 简体 中 六 (6B2312) ] 


Service 
shop 
style 


格式 @) test 


旧 css config. asp iB 里 














页 面 尾 性 .， ] | 列表 项 目 . J 2 


后 ”1 个 本 地 项 目 被 选中 ,总 [昌吉 一] 





大 图 /-23 ”完成 的 商品 搜索 结果 页 面 
(2 ) 本 页 血 相 天 的 程序 分 析 如 下 。 


<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td>&nbsp;</td> 
</tr> 
<tr> 
<td><lmg src="../images/index pro01l1.gif" width="S73" height="41"></td> 
</tr> 
<tr> 
<td align="center" valign="top" background="../images/index pro03.gif"'><table width="90%" 
border="0" cellpadding="S" cellspacing="0" class= "fenlel > 
<tr> 
<td width="77%" bgcolor="#FFFFFF"> 
<% 
1f Request("search key")<>"" then 
0%0> 
<strone> 您 搜索 的 关键 词 是 :</strong><font color="#FF3300">&nbsp; 
<%=Request("search key")»%></font> 
<% 
else 
0%0> 
<strong><%=Request("name")»%>: </Strong> 
<% 


end 1f 








200>> 
/在 搜索 的 关键 词 后 面 显示 前 面 输入 搜索 的 阶段 变量 即 搜索 的 名 称 值 
</td> 
<td width="23%" bgcolor="#FFFFFF"><a href="all list.asp">&lt;&lt; 返 回 障 品 分 类 </a></td> 
</tr> 
</table> 
<table width="90%" border="0" cellpadding="0" cellspacine="0" > 


<tr> 了 于 
<td><lmg src="../images/Spacer.gif" width="1"” height="3"></td> 王国 | 
</tr> 
</table> 
<table width="90%" border="0" cellpadding="5" cellspacing="0" class="fenle1"> 
<tr> 
<td width="48%" bgcolor="#FFFFFF"><strong> 障 品名 </strong></td> 
<td width="17%" bgcolor="#FFFFFF"><strong> 报 价 </strong></td> 
<td width="16%" bgcolor="#FFFFFF"><strong> 在 架 状 态 </strong></td> 
<td width="19%" bgcolor="#FFFFFF">&nbsp;</td> 
</tr> 
<% 
if rs.recordcount<>0 then 
for 1=1 to pagesize 
if rs.eof then 
exlt for 
end 1f 
0%0> 
<% 
if (1 mod 2)=0 then 
200> 
<tr bgcolor="#EBEBEB"> 
<% 
end 1f 
00>> 
/显示 所 有 的 搜索 结 
<td><a hre 全 "product.asp?productID=<%=rs(" 商 品 JD")%>" target=" blank"><%=rs(" 障 上 总 名 称 
")%></a></td> 
<td><%=rs(" 零 售 价 ")%></td> 
/通过 商品 ID 打开 商品 名 称 
<td> 
<% 
ifrs(" 在 染 状 态 ")=0 then 


response.Wrtite(" 缺 货 " 





else 
response.Wriite(" 在 架 风 
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end 1f 








0%0> 
// 显 未 商品 是 耕 在 染 或 者 缺 贷 
</td> 


<td><font color="1A3D05"><a hre 仁 /shop/add2bag.asp?productID=<%=rs(" 商 品 ID")%>"><img 
src="../images/index dinggou.gif" width="84" height="16" border="0"></a></font></td> 
</tr> 
<% 
rs.MoveNext 
next 
else 
00>> 
<tr bgcolor="#EBEBEB"> 
<td colspan="4"><font color="#FF3300"> 抱 车 ! 您 选择 的 分 类 暂时 没有 货物 ， 请 您 电话 与 我 们 联 
系 ! </font></td> 
</tr> 
<% 
end 1f 


rs.close 








set rs=nothing 
conn.close 
set conn=nothing 
200> 
</table> 
<table width="90%" border="0" cellpadding="8" cellspacing="0" class="fenle1"> 
<tr> 
<td width="35%"> 第 <%=page%> 页 / 共 <%=pageall%> 页 // 统 计 搜 索 总 数 </td> 
<td width="32%">&nbsp;</td> 
<td width="33%" align="right"> 
<%if Cint(page-l)<=0 then 
response.write "上 一 页 " 
else%o> 
<ahref="search result.asp?page=<%=page-1%>&name=<%=Request("name")%>&sub classID= 
<%=Request("sub classID")%>&search key=<%=request("search key")»%>&search class=<%=request 
("search class")%>"> 上 一 页 </a> 
<%end lfyo> 
&nbsp;/&nbsp; 
<%If Cint(paget+l)>Cint(pageall) then 
response.write "下 一 页 " 
else%o> 
<ahref="search result.asp?page=<%=page+1%>&name=<%=Request("name")%>&sub classID=<%=Re 
quest("sub classID")%>&search key=<%=request("search key")%>&search class=<%=request("search clas 
s")%>"> 下 一 页 </a> 


<%end lfyo> 

</td> 

</tr> 

</table></td> 

</tr> 

<tr> 

<td><1mg src="../images/index pro02.g1f" width="573" height="46"></td> 
</tr> 


</table> 


人 这 里 就 完成 了 商品 相关 动态 负面 的 设计 ， 主 要 实现 了 商品 的 展示 功能 。 


7.5 ”结算 功能 页 面 


购物 车 最 核心 的 部 分 就 是 如 何 进行 商品 结算 ， 通 过 这 用 户 在 选择 好 自己 喜欢 的 
商品 后 ， 可 ee。 各 确认 所 需要 商品 ， 输 入 联系 方式 ， 提 交 后 与 入 数据 库 ， 方 便 企 业 进 行 
售后 服务 即 送 货 收 钱 等 工作 ， 这 就 是 购物 车 的 核心 部 分 


7.5.1 统计 订单 商品 数量 


该 页 面 在 前 面 的 代码 中 经 党 应 用 到 ， 单 击 “ 放 入 购物 车 ”图 标 按钮 后 都 调用 该 页 面 ， 主 
要 为 实现 统计 订单 数量 的 功能 页 面 。 该 页 面 完 全 是 ASP 代码 ， 设 计 分 析 如 下 。 


<!--#1nclude file="../config.asp"--> 

/调用 config.asp 确认 数据 库 连 接 

<% 

productID=request("productID") 

// 定 义 阶段 变量 productID 

set rs=server.createobject("adodb.recordset") 

/创建 记录 集 

sq]="select * from 商品 where 商品 ID="&productID&'" order by 商品 ID" 

/用 sql 碍 询 功能 通过 商品 ID 与 productID 核对 

rs.open Sql,conn,1 ,1 

if rs.recordcount<>0 then 
session("all number")=session("all number")+1 

/通过 session 记录 放 入 购物 车 的 商品 总 个 数 
session("product"&session("all number"))=productID 
session("all price")=session("all price+CDbls(0" 零 售 价 人 由) 

end 1f 

rs.close 





set rs=nothing 
response.Redirect(request.serverVariables("Http REFERER")) 
2%0> 


/如 果 是 订购 则 商品 的 总 个 数 加 1， 购 物 总 价 加 入 刚 订 购 商品 的 零售 价 
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<% 

for 1=1 to CInt(session("all number")) 
200>> 
<%=session("product"&1)&"<br>"%> 
<% 

next 


90> 


7 之 兼职 指导 : 


session 在 Web 本 占有 非常 重要 的 位 置 。 由 于 网 页 是 一 种 无 状态 的 连接 程序 ， 因 此 
无 法 得 知 用 户 的 浏览 状态 。 因 此 必须 通过 Session 记录 用 户 的 有 关 人 信息， 以 供用 户 再 次 以 此 
身份 对 Web 服务 器 提出 要 求 时 做 确认 。 


7.5.2 ”清除 订单 信息 


广 页面 是 清除 订单 信息 的 页 面 ， 通 过 单 击 “清空 ”文字 能 够 调用 clear_bag.asp 页 面 ， 
通过 里 面 的 命令 清空 购物 车 中 的 数据 统计 。 清 除 订 单 的 代码 如 下 。 


<%OLANGUAGE="VBSCRIPT" CODEPAGE="936"%> 
<% 

user=session("user") 

user type=session("user prop") 
session.Contents.RemoveAll() 

session("user" )=user 

session("user prop")=user type 
response.Redirect(request.serverVariables("Http REFERER")) 
2%0> 


/通过 RemoveAl0O 命 令 实现 清空 session 中 的 记录 


7.5.3 订单 用 户 信息 确认 


用 户 登 录 后 选 放 入 购物 车 ， 单 击 首页 上 的 “去 结算 ”按钮 ， 则 打开 订单 用 户 信息 
确认 页 面 shop.asp，, i Uae ep 需要 设置 输入 “ 送 货 信 息 ” 的 
功能 ， 然 后 单 击 os 续 ” 按 钮 把 输入 的 信息 存 入 数据 库 中 ， 打 开 订 单 确认 信息 页 面 
order.asp。 该 页 和 面 设计 完成 后 的 效果 如 图 /7-24 所 示 。 

用 户 的 信息 主要 在 表单 form 之 间 ， 本 页 的 主要 代码 列 出 如 下 。 


<form name="post lnf form" method="post" action= "order.asp"” onSubmit="return check()"><tr> 
<td>&nbsp;</td> 
</tr> 
<tr> 
<td><lmg src="../images/index pro012.gif width="573" height="41"></td> 
</tr> 


<tr> 
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DW 文件 四 编辑 四 ”查看 (插入 思 修改 胃 格式 四 命令 (CD 站 点 (2) 窗口 地” 帮助 | | 设计 器 v 
:dreamweaver\ 光 查 \source\noT\site\vshop\s5hop. asp re 


立 档 类 型 : hSP VBScript 


动态 娘 本 (session. all_nmumber) 
动态 女 本 (session. all_price) 

动态 尾 性 (option. value】 

动态 尾 性 (a. href) 

动态 属性 (order_product_name<=. . . 
动态 尾 性 (order_product_name<y=. . . 
动态 属性 (order_product_count<%... 
动态 属性 (order_productid<%=i%>... 
动态 属性 (order_productid<%-i%>... 
动态 属性 (order_product_price<%... 
动态 属性 (order_product_price<%... 
动态 属性 (order_productnum. value) 
动态 女 本 (session. all_price) 
动态 尾 性 (user_realname. value) 
动态 属性 (user_add. value) 

动态 属性 (user_phone. value) 

动态 属性 (user_mphone. value) 
动态 属性 (user_eami1.value) 


config. asp main menu.asp index.css left _ menu. asp 








Roe 


: : 四 -加 order_search 
Dee | 四- 国 product 
， a: 由 - 仿 service 
|: 日 -BB shop 
| | ) add2bag. asp 
clear_bag... 
order. asp 


es wa 865 x 472v 94 /2 秒 简体 中 文 (GB2312) 


order_sur... 


格式 无 v| 类 | 无 vB7 上 丘 丘 给 坟 术 BD | rr 
BS Rm oo mo | ew 


| ”页 面 属性 ..， | | ”页 面 属性 ..， | E 列表 项 目 . Ce 二 LA manfig acn 
王 1 个 本 地 项 目 被 选中 ,总 [日 吉 一] 








加 图 /7-24 ”订单 用 户 信 息 确 认 页 面 效 果 


<td align="center" valign="top" background="../images/index pro03.gif"'> <table 
width="90%" border="0" cellpadding="S" cellspacing="0" class="fenle1"> 
<tr> 
<td width="47%" bgcolor="#FFFFFF"><strong> 购 物 车 信息 </strong></td> 
<td align="right" bgcolor="#FFFFFF"> 日 期 : 


<% 





now year=Year(Date) 
1f Month(Date)<10 then 
now month=0&Month( Date) 
else 
now month=Month(Date) 
end 1f 
tf Day(Date)<10 then 
now day=0&Day(Date) 
else 
now day=Day(Date) 
end 1f 
response.Write(now year&"-"&now month&"-"&now day) 
0%0> 
</td> 


</tr> 
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以 
习 
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于 
本 
Xn 





200 


<tr> 
<td colspan="2" class="line"><table width="100%" border="0" cellpadding="3" 
cellspacing="0" class="rightA"> 
<tr> 

<td width="5%">&nbsp;</td> 

<td width="56%"> 订 购物 品 </td> 

<td width="10%"> 数 量 </td> 

<td width="29%"> 单 价 </td> 


</tr> 
<% 
for 1=1 to 
rs product .recordcount 
'session("product" &1) 
00>> 
<tr> 


<td <%if (1 mod 2)<>0 then%>bgcolor="#FFFFFF"<%end lfyo>><lmg 
src="../images/index title.gif" width="19" height="12"></td> 
<td <%if (1 mod 2)<>0 then%>bgcolor="#FFFFFF"<%end 1f%0>><a 
hre 人 ="/product/product.asp?productID=<%=rs_ product(" 阐 品 ID")%>" target=" blank"><%=rs product(" 商 
上 品名 称 ")%></a><input name="order product name<%=i%>" type="hidden" value="<%=rs_ product(" 商 品 
名 称 ")%>"></td> 
<td <%if (1 mod 2)<>0 then%>bgcolor="#FFFFFF"<%end lfyo>> 
<input name="order product count<%=1%>" type="text" 
class="shopinput" value="1" size="2"> 
<input name='"order productID<%=1%>" type="hidden" value="<%= 
rs_product(" 商 品 ID")%>"></td> 
<td <%if (1 mod 2)<>0 then%>bgcolor="#FFFFFF"<%end 1f%>><%= 
rs_product(" 零 售 价 )%><input name="order product price<%=i%>" type="hidden" value="<%=rs product 
("零售 价 ")%>"></td> 
</tr> 
<% 
rs product.movenext 


next 


0%0> 


<% 下 面 这 个 隐 韦 表单 记录 





了 购物 的 种 基数 %> 
<input 
name="order productNum" type="hidden" value="<%=rs product.recordcount%o>"> 
<tr> 
<td class="fenle1">&nbsp;</td> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 


<td><font color='"#FF6600" 必 总 价 : 


<% 
if session("all price")="" then 
00>> 
0 
<% 
else 
%> EF 
<%=session("all price")%> 
<% 
end 1f 
0%0> 
元 </font></td> 
</tr> 
<tr> 








<td colspan="4" class="fenlei"> 说 明 : 在 数量 选择 框 中 可 以 直接 修改 选 
购 的 商品 数量 ， 修 改 为 “0” 表 示 不 选 购 此 商品 。</td> 
</tr> 
<tr> 
<td colspan="4" class="fenlei"><1img src="../images/Spacer.gif" width="1" 
height="$5"></td> 
</tr> 
</table></td> 
</tr> 
</table> 
<table width="90%" border="0" cellpadding="S" cellspacing="0" class="fenle1"> 
<tr> 
<td bgcolor='#FFFFFF"><strong> 送 货 信 息 </strong></td> 
</tr> 
<tI> 
<td class="line"><table width="100%" border="0" cellpaddine="3" 
cellspacing="0" class="rightA "> 
<tI> 
<td width="5%"><1mg src="../images/index title.gif" width="19" 
height="12"></td> 
<td width="14%"> 收 货 人 </td> 
<td width="81%"><mnput name= "user realname" type="text" class=' Teglste"” 
value="<9%=TS_User(" 真 实 姓 名 "9%6>"></td> 
</tr> 
<tI> 
<td bgcolor="#FFFFFF"><img src="../images/index title.gif" width="19" 
height="12"></td> 
<td bgcolor="#FFFFFF"> 送 货 地 址 </td> 
<td bgcolor="#FFFFFF"><input name="Uuser add" type="text" 


a] 
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class="registe" Size="50" value="<%=rs user(" 住 址 ")%>"></td> 


</tr> 

<tr> 
<td><1img src="../images/index title.gif" width="19" height="12"></td> 
<td> 联 系 电话 </td> 


<td> <input name="user phone" type="text" class="registe" 
value="<%=rs_user(" 电 话 ")%>"></td> 
</tr> 
<tr> 
<td bgcolor="#FFFFFF"><img src="../images/index title.gif" width="19" 
height="12"></td> 
<td bgcolor="#FFFFFF"> 手 机 </td> 
<td bgcolor="#FFFFFF"><input name="user mphone" type="text" 
class="registe" value="<%=rs user(" 手 机 ")%>"></td> 
</tr> 
<tr> 
<td><img src="../images/index title.gif" width="19" height="12"></td> 
<td>Email</td> 
<td><input name 
value="<%=rs_user(" 电 子 邮件 ")%>"></td> 
</tr> 
<tr bgcolor="#FFFFFF"> 


<td valign="top"><1img src="../images/index title.gif" width="19" 


一 1 


user eamil" type="text" class="registe" 


1 


height="12"></td> 
<td valign="top"> 附 言 </td> 
<td><textarea name="user ps" cols="40" rows="3" 
class="registe"></textarea></td> 
</tr> 
<tI> 
<td colspan="3" class="fenlei"><1mg src="../images/Spacer.gif" width="1" 
height="$"></td> 
</tr> 
</table></td> 
</tr> 
</table> 
<table width="90%" border="0" cellpadding="S" cellspacing="0" class="fenle1"> 
<tr bgcolor="#FFFFFF"> 
<td bgcolor="#FFFFFF"><strong> 送 货 资 费 说 明 </strong></td> 
</tr> 
<tr> 
<td valign='"top" class="line"> 送 货 五 环 以 内 ， 单 次 订购 达 人 民 币 300 元 ， 人 免费 





送 货 上 门 。 
<p> 如 超出 我 公司 所 规定 免费 送 货 范 围 的 订货 ， 可 咨询 800-810-3571<br> 
</p></td> 
</tr> 


</table> 
<table width="90%" border="0" cellpadding="8" cellspacing="0" class="fenle1"> 
<tr> 
<td width="48%" align="right"> 
<input name="Button" type="button" class="registebt" value=" 一 继续 挑选 " 
onClick="history.back()"> 
</td> 
<td width="52%"><input name="Submit2" type="submit" class="registebt" value=" 
结算 一 "> 
&nbsp;</td> 





</tr> 
</table></td> 
</tr> 
<tr> | 
<td><img src="../images/index pro02.gif" width="$S73" height="46"></td> , 


</tr></form> 


从 功能 上 可 以 看 出 该 页 面 的 功能 有 点 类 似 于 留言 
能 。 订 单 商 品 的 统计 功能 和 add2bag.asp 页 面 的 统计 功能 一 样 


7.5.4 订单 确认 信息 页 面 


单 击 shop.asp 页 面 上 的 【结算 】 按 钮 后 ， 打 开 order.asp 订单 确认 页 面 ， 在 送 货 信息 
中 显示 了 上 一 页 面 输 入 的 这 货 证 细 人 信息， 设置 的 结果 如 图 7-25 所 示 。 


DW 文件 ”编辑 5 查看 (WD 插入 (I) 修改 如” 格式 (0) 命令 (CD 站 点 (3) 窗口 呈 帮助 吧 | 


order.asp XX 











只 不 过 多 了 ?J 单 商品 统计 功 











config. asp main menu.asp index.css left menu. asp 


| 实时 代码 | 的 ellie i © .© | 标题 


| 名 号 站 谷地 址 | 二 le:777D1 /dtreanweayer7 光 盘 /s iT shop/ or der. asp 动 ; [session. all number) 六 
(session. all_price) ri 
[option. value) 

[a. hr ef) 
[lorder_productid<%=i%>. 
[order_productid<%=i%>. 
[order_product_name<N=. 
[order_product_name<N=. 
lorder_product_count <%. 
lorder_product_count <%. 


: 请 您 再 次 确认 您 所 订购 的 商品 及 送 货 信 息 : : Ey [order_product price<%. 
E 索要 修改 请 点 击 页 面 底部 的 "修改 订单 该 弓 : : 上 [lorder_ product price<%. 一 
: 箭 认 请 点 十 页 面 底部 的 "生成 订单 " 按 馈 : : By [request. user_realname) 

















(user_realname. value, . 
[request. user_add) 
(user_add. value, reque. 
(request. user_phone) 
(user_phone. value, req. 记 | 
轩 | 而 而 二 二 国 | 


和 


锦 塌 衣 天 网 装 册 天 申 











由 - .入 order_search 
央 一 Product 
: 田 -- 筷 Service 
oF equestuser mphone es | 9 she 
: 浊 : Emal ifrequestuser_ eamil 而 | oo addzbag. asp 
: : clear_bag... 
order. asp 


order_sur... 


[| 四 无 ~ 类 无 vB7 本 生生 二 机 BW | 
cs mw VW VoD i 


页 钾 尾 性 ... 列表 项 目 








1 个 本 地 项 目 被 选中 总 [日 志 ... ] 





图 图 7-25 订单 确认 页 面 
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form 之 则 的 代码 如 下 。 


一 1 


<form name="post lnf form" method="post" action="order.asp" onSubmit="return check()"><tr> 
<td>&nbsp;</td> 
</tr> 
<tr> 
<td><lmg src="../images/index pro012.g1if" width="573" height="41"></td> 
</tr> 
<tr> 
<td align="center" valign="top" background="../images/index pro03.gif"'> <table 
width="90%" border="0" cellpadding="S" cellspacing="0" class="fenle1"> 
<tr> 
<td width="47%" bgcolor="#FFFFFF"><strong> 购 物 车 信息 </strong></td> 
<td align="right" bgcolor="#FFFFFF"> 日 期 : 
<% 
now year=Year(Date) 
1if Month(Date)<10 then 
now month=0&Month( Date) 
else 
now month=Month(Date) 
end 1f 
if Day(Date)<10 then 
now day=0&Day(Date) 
else 
now day=Day(Date) 
end 1f 
response.Write(now year&"-"&now month&"-"&now day) 
0%0> 
</td> 
</tr> 
<tr> 
<td colspan="2" class="line"><table width="100%" border="0" cellpadding="3" 
cellspacing="0" class="rightA"> 
<tr> 
<td width="5S%">&nbsp;</td> 
<td width="56%"> 订 购物 品 </td> 
<td width="10%"> 数 量 </td> 
<td width="29%"> 单 价 </td> 
</tr> 
<% 
for 1=1 to rs product.recordcount 
'session("product" &1) 


0%0> 
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<tr> 
<td <%if (1 mod 2)<>0 then%>bgcolor="#FFFFFF"<%end lfyo>><lmg 
src="../images/index title.gif" width="19" height="12"></td> 
<td <%if (1 mod 2)<>0 then%>bgcolor="#FFFFFF"<%end lfyo>><a 
href="/product/product.asp?productID=<%=rs product(" 产 品 ID")%>" target=" blank"><%=rs product(" 商 
癌 名称")%></a><input name="order product name<%=1%>" type="hidden" value="<%=rs product(" 商 品 
名 称 ")%>"></td> 
<td <%if (1 mod 2)<>0 then%>bgcolor="#FFFFFF"<%end lfyo>> 
<input name="order product count<%=1%>" type="text" 
class="shopinput" value="1" size="2"> 
<input name="order productID<%=1%>" type="hidden" 
value="<%=rs_ product(" 产 品 ID")%>"></td> 
<td <Y%lf (1 mod 2)<>0 then%>bgcolor="#FFFFFF"<%end 
if26>><%=rs_ product(" 和 零售 价 %><input name="order product price<%=1%>" type="hidden" 
value="<%=rSs_product(" 零 售 价 ")%>"></td> 
</tr> 
<% 
rs product.movenext 
next 
0%0> 
<%' 下 面 这 个 隐藏 表单 记录 了 购物 的 种 类 数 %> 


<input name='"order productNum" type="hidden" value="<%=rs product.recordcount%o>"> 








<tr> 
<td class="fenlei">&nbsp;</td> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
<td><font color="#FF6600"> 总 价 : 
<% 
1f session("all price")="" then 
0%0> 
0 
<% 
else 
00> 
<%=session("all price")%> 
<% 
end 1f 
00>> 
元 </font></td> 


</tr> 
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200 


<tr> 
<td colspan="4" class="fenlei"> 说 明 : 在 数量 选择 框 中 可 以 下 接 修 改选 
购 的 商品 数量 ， 修 改 为 “0” 表 示 不 选 购 此 商品。</td> 


</tr> 








<tr> 
<td colspan="4" class="fenlei"><1img src="../images/Spacer.gif" width="1" 
height="5"></td> 
/i 
</table></td> 
</tr> 
</table> 


<table width="90%" border="0" cellpadding="S" cellspacing="0" class="fenle1"> 


<tr> 

<td bgcolor="#FFFFFF"><strong> 送 货 信 息 </strong></td> 
</tr> 
<tr> 


<td class="line"><table width="100%" border="0" cellpadding="3" 
cellspacing="0" class="rightA"> 
<tr> 
<td width="5%"><1mg src="../images/index title.gif" width="19" 
height="12"></td> 
<td width="14%"> 收 货 人 </td> 
<td width="81%"><input name="user realname" type="text" class="registe" 
Value="<%=rs_user(" 趴 实 姓 名 ")%>"></td> 
</tr> 
<tr> 
<td bgcolor="#FFFFFF"><img src="../images/index title.gif" width="19" 
height="12"></td> 
<td bgcolor="#FFFFFFF"> 送 货 地 址 </td> 
<td bgcolor="#FFFFFF"><input name="user add" type="text" class="registe" size="S0O" 
value="<%=rs_user(" 住 址 ")%>"></td> 
</tr> 
<tr> 
<td><lmeg src="../images/index title.gif" width="19" height="12"></td> 
<td> 联 系 电 话 </td> 
<td> <input name="user phone" type="text" class="registe" 
value="<%=rs_user(" 电 话 ")%>"></td> 
</tr> 
<tr> 
<td bgcolor="#FFFFFF"><iMmg src="../images/index title.gif" width="19" 
height="12"></td> 
<td bgcolor="#FFFFFF"> 手 机 </td> 


<td bgcolor="#FFFFFF"><input name="user mphone" type="text" class="regilste" 


value="<%=rs_user(" 手 机 ")%>"></td> 
</tr> 
<tr> 
<td><1mg src="../images/index title.gif" width="19" height="12"></td> 
<td>Email</td> 
<td><input name="user email" type="text" class="registe" 
value="<%=rs_user(" 电 子 邮 件 ")%>"></td> 
</tr> 
<tr bgcolor="#FFFFFF"> 
<td valign="top"><1img src="../images/index title.gif" width="19" 
height="12"></td> 
<td valign="top"> 附 言 </td> 
<td><textarea name="user ps" cols="40" rows="3" 
class="registe"></textarea></td> 
</tr> 
<tr> 
<td colspan="3" class="fenlei"><1img src="../images/Spacer.gif" width="1" 
height="S"></td> 
</tr> 
</table></td> 
</tr> 
</table> 
<table width="90%" border="0" cellpadding="S" cellspacing="0" class="fenle1"> 
<tr bgcolor="#FFFFFF"> 
<td bgcolor="#FFFFFF"><strong> 送 仙 资 费 说 明 </strong></td> 


</tr> 





<tr> 


<td valign="top" class="line"> 送 货 五 环 以 内 , 单 次 订购 达 人 民 币 300 元 ， 人 免费 送 


人 | 本 
<p> 如 超出 我 公司 所 规定 免费 送 货 范围 的 订货 ， 可 咨询 800-810-3571<br> 
</p></td> 
</tr> 
</table> 


<table width="90%" border="0" cellpadding="8" cellspacing="0" class="fenle1"> 
<tr> 
<td width="48%" align="right"> 
<input name="Button" type="button" class="registebt" value=" 一 继续 挑选 " 
onClick="history.back()"> 
</td> 
<td width="52%"><Iinput name="Submit2" type="submit" class="registebt" value=" 
A 
&nbsp;</td> 


2D1 


</tr> 
</table></td> 
</tr> 
<tr> 
<td><lmg src="../images/index pro02.g1f" width=" 973"” height="46"></td> 


u A </tr></form> 


于 上面 代码 中 所 涉及 的 命令 已 全 部 介绍 过 ， 这 里 不 再 介绍 
” “7.5.5 订单 最 后 确认 页 面 


单 击 订单 确认 信息 页 面 order.asp 上 的 【生成 订单 】 按 钮 后 ， 就 可 以 打开 
order_sure.asp 页 和 面 ， 该 页 面 是 把 订单 写 入 数据 库 后 弹出 的 完成 购物 页 面 ， 该 页 面 的 设计 同 
order.asp， 只 是 减少 了 【 送 货 信息 】 的 内 容 。 上 有 具体 不 再 介绍 ， 设 计 效 果 如 图 7-26 所 示 。 


DW 文件 四 ”编辑 ”查看 (WD 插入 (D 修改 灿 格式 (0) 命令 (CD) 站 点 (8) 窗口 号 帮助 品 | | 设计 器 v 


order_sure. asp X D:\dreamweaver\ 光 盘 \source\no7\site\shop\order_sure. asp 





一 





E 源 共 玛 】 config. asp main menu. asp index.css left menu. asp 


和 [代码 上 拆 分 [ 设计 ] [实时 代码 | 丘 光 ”| 实时 视图 || 检查 | @. 过 已 ， 原 甘 用 品 风力 | es 


四 < cy 六 4 全 地 址 : file: /iD | dreamw rf 光盘 js ce roT/ site shop/ order sure. asp 动态 女 本 【session all_number) 
A < 动态 净 本 (session. all_price) 
动态 属性 (option. value) 
动态 尾 性 (a. href) 











只 CG 人 人 O 色 多 | 局 

















由 .图 order_seareh 
-product 
园 service 






































日 - 岛 shop 
| add2bag. asp 
: v i iilD clear_bag... 
100% ”v865 x 472v 1 /1 秒 简体 中 六 (6B2312) order. asp 
: Dj order sur... 
区 类 汪 丝 些 标 题 0[ | DD soe 
Bess mo Re 
页 告 属性 . 列表 项 
| 一 入 ~ 和 六 
2 国 图 7-26 ”完成 购物 ?] 单 页 面 效 果 


7.6 订单 查询 功能 


用 户 在 购物 的 时 候 还 希望 知道 自己 在 近期 一 共 购 买 了 多 少 商 品 ， 单 击 导航 条 上 的 【订单 
查询 ] 命令， 打开 查询 输入 的 页 面 order_ so asp， 在 查询 文 本 域 中 输入 客户 的 订单 编 
号 ， 可 以 查 到 订单 的 处 理 情 况 页 面 your_order.asp， 方便 与 企业 的 沟通 。 
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7.6.1 用 户 订 单 查询 输入 
完成 的 订单 查 面 效 果 如 图 7-27 所 示 。 


DW 文件 中 ”编辑 (四 查看 (WD 插入 (DD 修改 如 ”格式 (0) 命令 ”站 点 (8) 窗口 号 才 助 0 | 
order_search. asp X bd C3: 


config. asp main menu. asp index.css left menu. asp 


动态 人 亲本 [session. all_number) 
动态 亲本 (session. all_price) 
动态 尾 性 (option. value) 
动态 女 本 人 request. error_inf) 





Rep 


| 5 汤色 外 | 向 


日 © order_search 
I order_sea... 
司 Your_orde... 
Product 
Service 
shop 
style 
test 


格式 中 | 无 回 类 ’ = [ 加 放电 
旧 css DO 无 Y 无 | 链接 (LL) < de left_meru. asp 
后 ”1 个 本 地 项 目 被 选中 ,总 [日志 ... ] 


国 图 7-27 订单 查询 页 而 效果 
本 页 form 表单 间 的 关键 代码 如 下 。 


<form name="form2" method="post" action="your order.asp"> 

<tr> 
<td colspan="2" align="center">&nbsp;</td> 

</tr> 

<Y%lf request("error inf"')<>"" then%> 

<tr> 
<td width="27%" height="20" align="center" class="rightA">&nbsp; </td> 
<td width="73%" class="rightA"><font 

color="#FF3300"><%=request("error mf"')%></font></td> 


</tr> 
<% 
end 1f 
0%0> 
<tr> 


<td align="right" class="rightA"> 订 单 写 : </td> 


<td class="rightA"><input type="text" name="order number"> 
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遇 
中 
Ey 
以 
习 
四 
分 
哺 
泌 





( dl &nbsp;&nbsp; <input type="submit" name="Submit" value=" 但 询 "> 
zz &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="your order.asp?order number=all" 


i ><font color="#666666"> 我 的 所 有 订单 </font></a></td> 


EA </tr> 
两 <tr> 
Tn <td colspan="2">&nbsp;</td> 
- </tr> 
/ / </form> 
A 





/” ”订单 查询 功能 和 首页 上 的 商品 搜索 功能 设计 方法 是 一 样 的 ， 需 要 在 输入 的 查询 页 
”好 数据 库 连 接 ， 设 置 查 询 给 入 文 木 域 ， 建 立 sq1 查询 命令 ， 具 体 的 设 te 
时 能 模块 设计 。 


7.6.2 用户 订 单 查询 疆 


玄 页 面 是 用 户 订 单 吾 询 输入 后 ， 单 击 【 查询 按钮 弹出 的 查询 结果 页 面 ， 完 成 的 效果 如 
/=28 DIA 





DW 文件 中 ”编辑 (EB) 查看 D 插入 (DD) 修改 如 ”格式 (QD) 命令 (CD) 站 点 (5) 窗口 ( 圳 ”和 助 ( 罗 | | 设计 器 ” [ 呈 [ 器 矿 矿 





Your_order. asp X D:\dreamweaver\ 光 得 \source\no7\site\order_search\your_order. asp 


ee , i ie - | Aaobe BrowserLab | BrowserLab 
NR config. asp main menu.asp index.css 1eft_menu. asp 


IE Ei 名- 忆 C 二 “一文 悄 类 型 : ASP VBseript 


J e 全 地 址 : dd sd od dtd Ee/ Sh 动态 站 本 (session. all_mmber) 
扩 动态 女 本 (session. all_price) 
动态 尾 性 (option. value) 
动态 属性 (a. href) 
动态 属性 (a. href) 
动态 属性 (a.href) 





EE TRE 


日- 局 order _search 


ba 二 order_sea... 
一 


[Dj Your_orde... 


Product 
Service 
shop 
style 
test 


求 成 成 臣 外 PBB 0 人 


confige. asp 


index. asp 








由 钾 导 性... 列表 项 目 





1 个 本 地 项 目 被 选中 , 总 





嘿 图 7-28 用户 订单 查询 结果 页 面 效果 
该 页 面 的 核心 代码 如 下 。 


<table width="90%" border="0" cellpadding="3" cellspacing="0" class= "fenlel "> 
<tr> 


<td width="47%" bgcolor="#FFFFFF"><strong> 订 单 写 : <%=rs order(" 订 单 
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ID")%></strone></td> 
<td width="34%" bgcolor="#FFFFFF"> 日 期 ，<%=rs_order(" 订 单 日 期 ")%></td> 
<td width="19%" align="right" bgcolor="#FFFFFF"> 
<% 
ifrs_ order(" 是 耕 处 理 ")=1 then 
00>> 
<font color="#FF6600"> 已 处 理 </font> 
<% 卫生 
else 
00>> 
<font color='"#0033FF"> 未 处 理 </font> 
<%end lfyo> 
</td> 
</tr> 
<tr> 
<td colspan="3" class="line"><table width="100%" border="0" cellpadding="3" 
cellspacing="0" class="rightA"> 
<tr> 
<td width="$5%" bgcolor="#FFFFFF">&nbsp;</td> 
<td width="61%" bgcolor="#FFFFFF"> 订 购物 品 </td> 
<td width="17%" bgcolor="#FFFFFF"> 数 量 </td> 
<td width="17%" bgcolor="#FFFFFF"> 单 价 </td> 
</tr> 
<% 
sql_order_product="select * from 订单 产品 where 订单 ID="&rs order(" 订 单 
ID")&"" 
set rs order product=server.createobject("adodb.recordset") 
rs order product.open sql order product,conn,!1,! 
for J=1 to rs order product.recordcount 
0%0> 
<tr> 
<td <%if (] mod 2)=0 then%>bgcolor="#FFFFFF"<%end lifyo>><lmg 
src="../images/index title.gif" width="19" height="12"></td> 
<td <Y%lif (J mod 2)=0 then’%>bgcolor="#FFFFFF"<%end lfyo>> 
<% 
sql product="select * from 商品 表 where 商品 ID="&rs order product(" 了 商品 ID") 
set rs product=server.createobject("adodb.recordset") 
rs product.open Sql productconn ,1 ,1 


ifrs product.recordcount<>0 then 


%> <a href="/product/product.asp?productID= 
<%=rs order product(" 商 品 ID")%>" target="” blank"><%=rs_product(" 障 品名 称 ")%></a> <% 
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end 1f 
%> </td> 
<td <%if ( mod 2)=0 then%>bgcolor="#FFFFFF"<%end if%%>><%=rs_order product(" 订 购 数 
量 ")%></td> 
<td <%if ( mod 2)=0 then%>bgcolor="#FFFFFF"<%end ip0>><%=rs product(" 零 售 价 
")%></td> 
</tr> 
<% 
rs order product.movenext 
next 
00> 
<tr> 
<td colspan="4" class="fenlei"><1img src="../images/Spacer.gif" width="1" height="5"></td> 
</tr> 
</table></td> 
</tr> 


</table> 


该 页 面 的 功能 程序 设计 与 Search_result.asp 页 面 一 样 。 


7.7 商城 后 台 系 统 


购物 车 后 全 系统 是 整个 网 站 建设 的 难点 ， 它 包括 了 几乎 所 有 的 瘟 用 ASP 人 处理 反 术 ， 其 中 
包 拓 了 新 闻 系 统 的 管理 功能 、? 单 的 处 理 功能 、 商 品 的 管理 功能 。 新 闻 系 统 的 管理 功能 在 前 
面 的 章节 中 已 经 介绍 过 ， 这 里 不 再 介绍 ， 重 总 介绍 订单 处 理 功 能 和 商品 的 管理 功能 。 


7.7.1 后 台 登 录 确 认 


商务 实用 型 网 站 拥有 者 需要 登录 后 合 进行 网 上 购物 系统 管理 ， 由 于 涉及 很 多 商业 机 窗 ， 
所 以 需要 设计 登录 用 户 确 认 页 面 ， 通 过 输入 唯一 的 用 户 名 和 密码 登录 后 全 进行 管理 。 本 网 上 
购物 系统 为 了 方便 使 用 ， 只 需要 在 首页 用 户 系统 中 直接 输入 “用 户 名 ”admin 和 “密码 ” 
admin ， 就 可 以 登录 后 合 。 下 和 面 需要 制作 用 于 判断 后 合 登 录 管 理 届 份 确认 动态 文件 
check_admin.aspo 


该 页 血 制 作 也 比较 简单 ， 完 成 的 代码 如 下 。 


<% 
if session("user prop")<>"admin" then 
response.Redirect("/member/login.asp?error in 伍 请 用 管理 员 账 号 登录 进入 后 台 管 理 !") 
end 1f 
2%0> 


/判断 用 户 是 否 为 adamin， 如 条 不 是 吏 打 开 出 错 信 息 页 面 











7.7.2 ”后台 订单 管理 


order_admin 文件 夹 是 用 来 放置 一 些 后 合 订单 处 理 的 动态 页 面 ， 里 面 分 别 放 置 了 如 下 5 
个 动态 页 面 。 

de1_order.asp: 删除 订单 。 

mark_order.asp: 标记 已 处 理 订单 。 

order_list.asp: 后 全 客户 订单 列表 。 + 
order_list_mark0.asp: 未 处 理 客户 订单 列表 。 We/ 
order_list_markl.asp: 已 处 理 客户 订单 列表 。 pm 
下 面 分 别 分 析 各 页 面 的 ASP 命令 。 

(1 ) 用 于 删除 订单 的 动态 页 面 del_order.asp 命令 如 下 。 


<!--#1include file="../config.asp"--> 
// 通 过 config.asp 页 面 建 并 数据 库 连接 
<!--#include file="../check admin.asp"--> 
<% 
if request("del orderID")<>"" then 

Setrs order product = conn.execute("delete * from 订单 商品 WHERE 订单 

ID=""&request("del orderID")&""") 

// 通过 delete 命令 删除 订单 

Set rs_order = conn.execute("delete * from 订单 表 WHERE 订单 ID='"&request("del orderID")&"") 
Err.Number>0 then 
response.write "对 不 起 ， 数 据 库 处 理 有 错误 ， 请 稍 候 再 试 .…" 
response.end 

/删除 失败 显示 的 信息 


else 








conn.close 
set conn=nothing 
response.redirect "order list.asp" 
end 1f 
else 
conn.close 
set conn=nothing 
response.Redirect(request.serverVariables("Http REFERER")) 
end 1f 


90>> 
) 标记 已 处 理 订 单 mark_order.asp 的 代码 如 下 。 


<!--#include file="../config.asp"--> 
<!--#1include file="../check admin.asp"--> 
<% 


if request("mark orderID")<>"" then 


203 








204 








set rs=server.createobject("adodb.recordset") 
sql="update 订单 表 set 是 奋 处 理 ="&request("mark")&" where 订单 
ID=""&request("mark orderID")&"" 


rs.open sql,conn,1,1 


tf Err.Number>0 then 
response.write "对 不 起 ， 数 据 库 处 理 有 错误 ， 请 稍 候 再 试 …" 
response.end 
else 
response.redirect(request.serverVariables("Http REFERER")) 
end 1f 
end 1f 
rs.close 


set rs=nothing 
conn.close 
set conn=nothing 


0%0> 


( 3) 后 全 客户 订单 列表 order_list.asp 的 设计 页 面 如 图 7-29 所 示 。 该 足 面 中 有 “ 订 
单 查 询 ” 功 能 ， re a 这 些 技 术 在 前 向 的 页 面 制 ee 不 同 
的 地 方 在 于 “订单 号 :” 里 面 有 删除 订单 功能 。 下 面 将 该 行 的 代码 列 出 进行 分 析 


说 明 。 


DW 文件 ) ”编辑 (ED) 查看 人 ”插入 (I) 修改 辐 格式) 命令 (C) 站 点 (8) ”窗口 (各 助人 0 | 





| 设计 器 ”[ 呈 吕 筷 缠 
| Adobe BrowserLab | BrowserLab 


剖 档 类 型 : ASF VESeript 
(request. error_inf) 
(a. href) 
[a. href) 
(a. href) 
(a. href) 
(a. href, 
(a. href, 
(a. href, 
(a. href, 


order_ list.asp X D:\dreamweaver\ 光 益 \source\no7\site\admin\order admin\order_ list. asp 


confie.asp check admin.asp main menu. asp index.css 








+ 一 


request. query... 
request. query... 
request. query... 
request. query... 
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日 久 站 点 - shop (D:\dre.. 

田 … 筷 about_us 

日 - BB admin 

: 由 由 图 news_admin 

: = 站 order_admin 

: 二 del _order... 

mark_orde... 

7? order lis... 


| order_ lis... 


| 


Es i 8 二 :上 二 + + 号 
区 格式 字 ) Ee B I i 择 些 标题 了 ) L | order 15. a 
CSS 


ID 并) 无 图 ~ 链接 部) | 国 gG6 目标 (6) .6 ge 
页 面 尾 性 ... 列表 项 目 i ln 


“1! 个 本 地 项 目 被 沈 中 ,总 于吉 一 





mhornlr admin acn 





国 图 7-29 后 全 客户 订单 列表 页 面 效 果 


<tr> 
<td width="30%" bgcolor="#FFFFFF"><strong> 订 单 写 : <%=rs order(" 订 单 ID")%> 
/显示 处 理 的 订单 编号 
</Strong></td> 
<td width="24%" bgcolor="#FFFFFF"> 日 期 ，<%=rs_order(" 订 单 日 期 ")%></td> 
<td width="16%" bgcolor="#FFFFFF"> <% 
ifrs_ order(" 古 耕 处 理 ")=1 then 
%> <font color="#FF6600"> 己 处 理 </font> 
<% 
else 
%> <font color='"#0033FF"> 未 处 理 </font> <%end if8%> </td> 
// 如 果 但 到 " 是 否 处 理 " 的 值 为 1， 那么 显示 为 已 处 理 ， 否 则 显示 为 未 处 理 
<td width="30%" bgcolor="#FFFFFF"><table width="100%" border= "0" cellspacing="3" 
cellpadding="0"> 
<tr> 
<td width="65%" align="center" valign="middle" bgcolor="#C4DCBO6" 
onMouseOver="mOvr(this,'#79B43D');" on MouseOut="mOut(this,#C4DCBO6');" > 


<% 
ifrs_ order(" 古 耕 处 理 ")=1 then 
%0> 


<a href—"mark order.asp?mark orderID=<%=rs order(" 订 单 ID")%>&mark=0"> 标 记 为 未 人 处理 





</a> 
<% 
else 
020> 
<a href="mark order.asp?mark orderID=<%=rs order(" 订 蛙 ID")%>&mark=1"> 标 记 为 已 
处 理 </a> 
<%end lfyo> 
// 标 记 是 否 为 处 理 的 订单 ， 并 通过 订单 DD 号 设置 链接 页 面 
</td> 


<td width="35%" align="center" valign="middle" bgcolor="#C4DCBO6" 
onMouseOver="mOvr(this,'#79B43D');" on MouseOut="mOut(this,#C4DCBO6');" > 
<a href="del order.asp?del orderID=<%=rs order(" 订 单 ID")%>" onClick="return confirm( 真 的 要 删除 
这 份 订 单 吗 ? )"> 删 除 
/通过 订单 ID 删除 选择 的 订单 
</a></td> 
</tr> 
</table></td> 
</tr> 


( 4 ) 未 处 理 客户 订单 列表 order_1ist_mark0.asp 显示 所 有 没有 处 理 的 客户 订单 页 面 ， 完 成 
的 设计 效果 如 图 7-30 所 示 。 该 页 面 的 制作 同 order _list.asp， 只 是 减少 了 搜索 功能 ， 该 页 面 
中 显示 的 是 rs_order(" 是 否 处 理 )=] 的 所 有 未 处 理 订 单 。 具 体 的 代码 请 至 看 光盘 中 的 源 代 码 。 
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Ea config. asp TC asp 


3 asp 


DW 文件 四” 编 加 四 ”查看 WD 插入 (DD 修改 人) 格式 (0) 命令 (C) 站 点 人 窗 D 和 助 四 | 


index. css 








JMWY 


TT PPT PTT 


[Gm] | 四 现 


怒 css 





= a 7 
no 记 ol eg 9 


高 档 办 公用 品 你 还 


三 生 二 上 和 ED 
目标 (@) v | 


页 面 属性 ... 列表 项 目 .. 





力图 7-30 显示 未 处 理 客户 订单 页 面 效果 





[a. href) 
(a. href) 
[a. href) 
[a. href) 


(a. href, 
[a. href, 
(a. href, 
[a. href, 


request. query... 
request., query... 
request. query... 
request. query... 





Bo 
呈 3T156 六 ae 


日 马 站 点 - shop 年: vdre... 
四- 鲁 
日- 加 admin 
| 由 - 国 news_adnin 

相国 order_admin 
| - 邮 del_order... 


mark_orde... 


about_us 


order_l1is... 
order_lis... 
i order_l1is... 
i -product_admin 
i i a 
wd 
@ 1 个 本 地 项 目 被 选中 ,总 [四 惠 一] 


(5 ) 已 处 理 客户 订单 列表 order_list_mark1l.asp 和 未 处 理 客户 订单 列表 是 相对 的 功能 页 


， 当 rs_order(" 是 否 处 理 ") 的 值 不 等 于 1 的 情况 下 的 订单 都 会 显示 在 该 页 面 ， 
具体 的 代码 请 查 


如 图 /一 31 所 示 。 


看 光盘 中 的 产 代码 。 


完成 后 的 效 





order_list marki.asp X 


DW 文件 中 编辑) 查看 WD 插入 (DD 修改 们 ”格式 (中 命令 站点) 窗口 人 D 天 助 0 | 





check_ admin. asp 


main_menu. asp 


ED config. asp 
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目标 
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国 图 7-31 已 处 理 客户 订单 页 面 效 果 


动态 属性 
动态 属性 
动态 属性 
动态 属性 
动态 尾 性 
动态 尾 性 
动态 属性 
动态 属性 


[a. href) 
fa. href) 
fa. href) 
(a. href) 
(a. href, 
[a. href, 
(a. href, 
[a. href, 


request. query... 
request. query... 
request. query... 
request. query... 


只 CG|58 合 以久 加 | 症 


日 [= 站 点 - shop (D:\dre... 


about us 
admin 
[1 news_admin 
order_admin 
-日 del_order... 
四 mark_orde... 
| order_lis... 
“和 情 order_lis... 
der lis... 
[1 Froduct_admin 


: oN hark sqnin sen 
上 sm 本 | 


@ 1 个 本 地 项 目 被 选中 , 总 


通过 上 面 的 订单 处 理 后 合 管理 页 血 可 以 看 出 ， 设 计 的 思路 主要 是 对 编辑 过 的 7 单 赋值 ， 
通过 赋值 情况 的 不 同 ， 再 分 别 区 分 为 已 处 理 亲 单 和 未 处 理 ?7 单 。 


7.7.3 ”后台 商品 管理 


product_admin 文件 夹 用 来 放置 商品 管理 的 页 面 ， 主 要 包括 了 如 下 9 个 页 面 ， 这 是 购物 
的 重点 和 难 点 ， 涉 及 上 传 图 乒 等 高 难度 编程 操作 。 
del1_product.asp: 删除 商品 页 面 。 
insert_product.asp: 插入 商品 页 面 。 /1 
product_add.asp: 添加 商品 信息 页 面 。 en 
product_list.asp: 后 合 管理 商品 列表 。 
product_modify.asp: 更 新 商品 信息 页 面 。 
update_product.asp: 建立 上 传 命令 动态 页 面 。 
upfile.asp: 上 传 文件 测试 动态 页 面 
upfile.htm: 上 传 图 片 文件 静态 测试 页 
upload_5xsoft.inc: 上 传 文件 ASP 命 


7 之 兼 职 指 导 : 


难度 主要 在 于 图 片 的 上 传 功 能 ， 这 9 个 页 面 当 中 upfile.asp 上 传 文件 测试 动态 页 面 和 
upfile.htm 上 传 图 片 文件 玉 态 测试 页 0 统 不 相关 的 页 面 ， 单 独 列 出 是 为 了 说 明 如 何 
上 传 图 片 。 


(1 ) 删除 商品 页 面 del_product.asp 只 是 一 段 删除 商品 的 动态 页 和 面 ， 代 三 在 前 面 的 删除 
功能 中 经 党 使 用 到 ， 有 具体 的 代码 如 下 。 


<!--#include file="../config.asp"--> 
<!--#include file="../check admin.asp"--> 
<% 
if request("del productID")<>"" then 
conn.execute("delete * from 商品 表 WHERE 商品 ID="&CInt(request("del productID"))) 
conn.execute("delete * from 订单 商品 WHERE 商品 ID="&request("del productID")&"") 
1f Err.Number>0 then 
response.write "对 不 起 ， 数 据 库 处 理 有 和 错误， 请 稍 候 再 试 ..…" 
response.end 
else 
conn.close 
set conn=nothing 
response.redirect "product list.asp" 
end 1f 
else 
conn.close 


set conn=nothing 
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response.Redirect(request.serverVariables("Http REFERER")) 
end 1f 


0%0> 


(2 ) insert_product.asp 为 插入 商品 页 面 ， 是 一 段 插入 记录 的 代码 。 当 中 引用 了 
upload_5xsoft.inc 的 程序 代码 ， 具 体 的 分 析 如 下 。 


<!--#include file="../config.asp"--> 

<!--#include file="../check admin.asp"--> 

<!--#include file="../../mam menu.asp"--> 

<!--#include FILE="upload Sxsott.inc"--> 

<%'OPTION EXPLICIT%> 

<%Server.ScriptTimeOut=5000%> 

<% 

dim upload,file,formName,formPath,imageName 

1mageName="" 

set upload=new upload 5xsoft// 建 六 上 传 对 象 

if upload.form("filepath")="" then /得 到 上 传 目 录 
set upload=nothing 





response.end 
else 

formPath=upload.form("filepath") 

/在 目录 后 加 (/) 

if right(formPath,1)<>"/" then formPath=formPath&"/" 
end 1f 


for each formName in upload.objFile // 列 出 所 有 上 传 的 文件 
set file=upload.file(formName) /生成 一 个 文件 对 象 
if file.FileSize>0 then // 如 果 FileSize > 0， 说 明 有 文件 数据 
file.SaveAs Server.mappath(formPath&file.FileName) /保存 文件 
'response.write file.FilePath&file.FileName&&" ("&file.FileSize&") => "AtformPathwFile.FlleNamek" 
成 功 !<br>" 
imageName=File.FileName 
end 1f 
set file=nothing 
next 
/删除 此 对 和 象 
'Sub HtmEnd(Msg) 
' set upload=nothing 
'response.write "<br>"&Msg&" [<a href=""javascript:history.back();""> 返 加 </a>]</body></html>" 
'response.end 
'end sub 
'for each formName in upload.objForny/ 列 出 所 有 form 数据 
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' response.write "pro chandi="&upload.form("pro chand")&"<br>" 
'next 
00> 
<% 
Dim root class,this class 
this class=CStr(Left(CLng(upload.form("pro bianma")),4)) 
root class=CStr(Left(CLng(upload.form("pro bianma")),2)) 
if upload.form("pro mingcheng")<>"" then 
pro_ mingcheng=upload.form("pro mingcheng") 
pro_bianma=CStr(upload.form("pro bianma")) 
pro_tiaoxingema=upload.form("pro tiaoxingma") 
pro Jiage=upload.form("pro Jiage") 
pro_chandi=upload.form("pro chand1") 
pro_danwei=upload.form("pro danwe1") 
pro guige=upload.form("pro guige") 
pro_zaljia=upload.form("pro zaijia") 
pro_tuljian=upload.form("pro tujjian") 
pro_shuoming=upload.form("pro shuoming") 
conn.execute("insert into 商品 表 ( 商 品名 称 ， 商 品 编码 ， 和 条码， 零售 价 ， 产 地 ， 单 位 ， 规 格 ， 商 品 
图 片 ， 子 类 别 ID， 根 类 别 ID， 在 架 状 态 ， 主 页 推荐 ， 商 品 说 明 ) values 
("&pro mingcheng&",""&pro bianma&","&pro tiaoxinema&","&pro JiageR",""&pro chandi&",""&pro d 
anwel&",""&pro guige&","&imageName&","&this class&",""&root class&","&pro Zailjia&","&pro tuljl 
an&","&pro shuoming&")") 
/进行 各 数据 的 插入 更 新 操作 
end 1f 
if Err.Number>0 then 
response.write "对 不 起 ， 数 据 库 处 理 有 错误 ， 请 稍 候 再 试 .…" 


response.end 





else 

conn.close 

set conn=nothing 

set upload=nothing 

response.Redirect("product add.asp?return_ in 会 添 加 丙 品 信息 成 功 ， 请 继续 添加 ! 站 
end 1f 


200> 


( 3 ) 添加 商品 信息 页 面 product_add.asp 和 用 户 注册 系统 的 用 户 信息 输入 页 面 设计 差 不 
多 ， 只 是 多 了 商品 图 片上 传 功能 ， 页 面 上 的 内 容 为 表单 中 建立 相应 的 动态 对 象 ， 比 较 简 单 ， 
如 图 /一 32 所 示 。 

(4 ) product_list.asp 为 后 合 管理 商品 列表 ， 该 页 面 完 成 的 效果 如 图 /7-33 所 示 。 页 面 
中 列 出 了 商品 的 一 些 信息 如 是 含有 图 片 、 商 品 价格 等 ， 主 要 是 后 面 的 “修改 ”及 “删除 ” 功 
能 ， 通 过 单 击 “修改 ”命令 打开 product_modify.asp 更 新 商品 信息 页 面 ， 进 行商 品 更 新 。 
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国 7=32 设计 的 添加 商品 信息 页 1 加 效果 
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( 5 ) 更 新 商品 信息 页 面 product_modify.asp 的 设计 效果 如 图 7-34 所 示 。 





DW 文件 中 ”编辑 (ED) 查看 只 插入 (D) 修改 仙 格式 (0) 命令 (CD) 站 点 (3) 窗口 咱 。 帮助 | | 设计 器 7 [人 虽 厄 强 


product_ modify.asp XX D:\dreamweaver\ 光 得 \source\noT\site\admin\product_admin\product modify. asp 2 
二 | Aaobe BrowserLab | BrowserLab 
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加 图 7-34 更 新 商品 信息 页 面 效 果 


该 页 有 图 片上 传 的 代码 ， 主 要 的 代码 也 在 form 之 间 。 


<form name="form1" method="post" action="update product.asp" enctype="multipart/form-data"> 
<tr> 
<td width="5%"><1img src="/images/index title.gif" width="19" 
height="12"></td> 
<td width="12%"> 商 品名 称 </td> 
<td width="83%"><input name="pro mingcheng" type="text" class="registe" 
id="pro mingcheng" value="<%=rs(" 疝 品名 称 ")%>" size="55"></td> 
</tr> 
<tr bgcolor="#FFFFFF"> 
<td height="12"><1mg src="/images/index title.gif"' width="19" height="12"></td> 
<td> 了 商品 编码 </td> 


<td><input name="pro bianma" type="text" class="registe" value="<9%=Trs(" 商 品 


好 
中 
对 
届 
习 
二 Tr 
车 
六 | 
水 





编 权 "9%>" size="20"> <input name="pro ID" type="hidden" value="<%=rs(" 商 品 ID')%>" Size="20"> 


</td> 

</tr> 

<tr> 
<td height="11"><1img src="/images/index title.gif"' width="19" height="12"></td> 
<td> 条 形 人 码 </td> 
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<td><input name="pro _tlaoxlngma'" type="text" class="registe" slize="20" 
value="<%=rs(" 条 形 公 ")%>"></td> 
</tr> 
<tr bgcolor="#FFFFFF"> 
<td valign="top"><1img src="/images/index title.gif" width="19" height="12"></td> 
<td valign="top"> 零 售 价 </td> 
<td><input name="pro jlage" type="text" class="registe" size="20" value="<%= 
rs(" 零 售 价 ")%>"> 
例 : 1200.00</td> 
</tr> 
<tr> 
<td width="5%"><1img src="/images/index title.gif" width="19" height="12"></td> 
<td width="12%"> 产 地 </td> 
<td width="83%"><input name="pro chandi" type="text" class="registe" silze="20" 
value="<%=rs(" 产 地 ")%>"></td> 
</tr> 
<tr bgcolor="#FFFFFF"> 
<td height="23"><1mg src="/images/index title.gif" width="19" height="12"></td> 
<td> 单 位 </td> 
<td><linput name="pro danwei" type="text" class="registe" size="10" value="<%= 
rs(" 蛙 位 ")%>"> 
例 : 人 台 、 文 </td> 
</tr> 
<tr> 
<td width="5%"><1img src="/images/index title.gif" width="19" height="12"></td> 
<td width="12%"> 规 格 </td> 
<td width="83%"><1nput name="pro guilge" type="text" class="registe" size="10" 
value="<%=rs(" 规 格 ")%>"> 
例 : 1*12、1 卷 / 箱 </td> 
</tr> 
<tr bgcolor="#FFFFFF"> 
<td height="23"><1mg src="/i1mages/index title.gif"' width="19" height="12"></td> 
<td> 在 淋 状 态 </td> 
<td><input name="pro zaijia" type="radio" value="1" <% ifrs(" 在 架 状 态 ")=1 
then %>checked<% end 1f %>> 
在 染 
<input type="radio" name="pro zaijia" value="0" <% ifrs(" 在 架 状 态 ")<>1 then 
%>checked<% end 1f %>> 
缺 贷 </td> 
</tr> 
<tr> 
<td valign="top"><1img src="/images/index title.gif" width="19" height="12"></td> 
<td valign="top"> 主 页 推荐 </td> 


<td> <input name="pro tuijian" type="radio" value="0" <% ifrs(" 主 页 推荐 ")<>1 
then %>checked<% end if %>> 
不 推荐 
<input type="radio" name="pro tuijian" value="1" <% ifrs(" 主 页 推荐 ")=1 then 
%>checked<% end 1f %>> 
推荐 </td> 
</tr> 
<tr bgcolor="#FFFFFF"> 
<td width="5%"><1img Src= /images/index title.gif" width="19" height="12"></td> 
<td width="129%0"> 商 品 图 片 </td> 
<td width="83%"><nput name="pro lmage" type="file" class="registe" size="35"> 
<input name="filepath" type="hidden" value= incoming 1mg"><input type="hidden" name= 
"act" value="upload"> 
<%ifrs(" 疝 品 图 片 ")<>"" then%> 
<a href="/incoming img/<%=rs(" 商 品 网 请")%>" target="_blank"> 伟 看 图 厂 </a> 
<Yoelse%o> 
还 没有 上 传 图 片 
<%end lfyo> 
</td> 
</tr> 
<tr> 
<td height="23"><1mg src="/images/index title.gif" width="19" height="12"></td> 
<td> 了 商品 说 明 </td> 
<td><textarea name="pro shuoming" cols="$S0" rows="6" class="registe"><%=rs 
("商品 说 明 ")%></textarea> 
</td> 
</tr> 
<tr> 
<td colspan="3" valign="top">&nbsp;</td> 
</tr> 
<tr> 
<td colspan="3" class="fenlei"><1img src="/admin/images/Spacer.gif" width="1" 
height="$"></td> 
</tr> 
<tr align="center"> 


二 1 


<td colspan="3"”class="fenjel"><input name="Submit" type="submit" 
="registebt" value=" 提 ” 交 '"> 


&nbsp; <input name="Submit2" type="reset" class="registebt" value=" 清 ” 除 


class 


"></td> 
</tr> 


</form> 


( 6) 单 击 更 新 商品 信息 页 面 product_modify.asp 中 的 【提交 】 按 钮 后 ， 主 要 通过 
Update_product.asp 建立 上 传 命令 动态 页 面 。 该 动态 页 面 的 功能 命令 同 insert_product.asp 
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2 1 和 4 


插入 商品 页 硬 ， 难 点 在 于 图 片 的 上 传 更 新 。 
产 代码 分 析 如 下 。 


<!--#include file="../config.asp"--> 

<!--#include file="../check admin.asp"--> 

<!--#include file="../main menu.asp"--> 

<!--#include FILE="upload Sxsotft.inc"--> 

<%'OPTION EXPLICIT%> 

<%Server.ScriptTimeOut=5000%> 

<% 

dim upload,file,formName,formPath,imageName 

1mageName="" 

set upload=new upload 5xsoft// 建 并 上 传 对 象 

if upload.form("filepath")="" then "// 得 到 上 传 卓 录 
set upload=nothing 





response.end 
else 
formPath=upload.form("filepath") 
"在 目录 后 加 (/) 
if right(formPath,1)<>"/" then formPath=formPath&"/" 
end 1f 
for each formName in upload.objFile// 列 出 所 有 上 传 的 文件 
set file=upload.file(formName) // 生 成 一 个 文件 对 象 
if file.FileSize>0 then // 如 果 FileSize > 0 说 明 有 文件 数据 
file.SaveAs Server.mappath(formPath&file.FileName) ”// 保 存 文件 
'response.write file.FilePath&file.FileName&" ("&file.FileSize&") => "&formPath&File.FileName& 


"成 功 1<br>" 


imageName=File.FileName 
end 1f 
set file=nothing 
next 


/删除 此 对 象 


'Sub HtmEnd(Msg) 

' set upload=nothing 
'response.write "<br>"&Msg&" [<a href=""javascript:history.backO;""> 返 回 </a>]</body></html>" 
'response.end 

'end sub 

'for each formName in upload.objForm // 列 出 所 有 form 数据 

' response.write "pro chandi="&upload.form("pro chand")&"<br>" 

'next 

00> 


<% 


Dim root class,this class 
this class=CStr(Left(CLng(upload.form("pro bianma")),4)) 
root class=CStr(Left(CLng(upload.form("pro bianma")),2)) 
if upload.form("pro mingcheng")<>"" then 
pro_ID=upload.form("pro ID") 
pro_ mingcheng=upload.form("pro mingcheng") 
pro_bianma=CStr(upload.form("pro bianma")) 
pro_tiaoxingema=upload.form("pro tiaoxingma") 
pro Jiage=upload.form("pro Jiage") 
pro_chandi=upload.form("pro chand1") 
pro_danwei=upload.form("pro danwe1") 
pro_ guige=upload.form("pro guige") 
pro_Zzaljia=upload.form("pro zaijia") 
pro_tuljian=upload.form("pro tujjian") 
pro_ shuoming=upload.form("pro shuoming") 
lif imageName<>"" then 
conn.execute("update 商品 表 set 商品 名 称 ="&pro mingcheng&", 商 品 编码 
='"&pro bianma&"', 条 形 码 ="&pro tiaoxingma&", 零 售 价 ="&pro jiage&"", 产 地 ="&pro chandi&", 单 位 
="&pro danwei&", 规 格 ="&pro_guige&", 商 品 图 片 ="&imageName&" ,村 类 别 ID="&this_class&", 根 类 
别 ID="&root class&"', 在 架 状 态 ="&pro_ zaijia&", 主 页 推荐 ="&pro tuijian&", 商 品 说 明 
= "&pro shuoming&" where 商品 ID="&pro ID) 
else 
conn.execute("update 商品 表 set 商品 名 称 ="&pro mingcheng&", 商 品 编码 
='"&pro bianma&", 条 形 码 ="&pro tiaoxingma&'", 零 售 价 ="&pro jiage&", 产 地 ='"&pro chandi&", 单 位 
="&pro danwei&", 规 格 ="&pro guige&", 子 类 别 ID="&zthis_class&", 根 类 别 ID="&root class&", 在 架 状 
态 ="&pro_zaijia&", 主 页 推荐 ="&pro tujjian&", 商 品 说 明 ='"&pro_ shuoming&'" where 商品 ID="&pro ID) 
end 1f 
end 1f 
lf Err.Number>0 then 
response.write "对 不 起 ， 数 据 库 处 理 有 错误 ， 请 稍 候 再 试 .…" 
response.end 
else 
conn.close 
set conn=nothing 
set upload=nothing 
response.Redirect("product list.asp") 
end 1f 


0%0> 
(7 ) 关于 上 传 文件 测试 动态 页 面 upfile.asp、 上 传 图 片 文件 静态 测试 页 面 upfile.htm、 


上 传 文件 ASP 命令 模版 upload_5xsoft.inc3 个 页 面 是 为 了 方便 企业 建立 购物 车 时 单独 调用 ， 
光盘 里 面 也 有 详细 的 程序 解释 说 明 。 
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7.8 网 站 其 他 说 明 页 面 


网 上 购物 系统 通过 上 面 几 个 小 节 的 分 析 与 设计 ， 在 购物 及 后 全 管理 上 的 制作 基本 上 已 经 
完成 ， 但 还 有 很 多 的 说 明 页 面 ， 如 制作 与 购物 相关 的 一 些 说 明 的 页 面 client.asp、 用 来 说 明 
售后 服务 的 页 面 Service.asp、 关 于 企业 的 内 容 简介 页 面 about_us.asp 等 需要 企业 由 自身 出 
发 ， 在 页 面 中 输入 企业 相关 的 一 些 信息 及 购物 说 明 。 

关于 购物 车 其 他 的 说 明 页 面 在 这 里 不 再 进行 介绍 ， 下 向 主要 对 购物 流程 进行 举例 旗 
明 。 网 上 购物 系统 要 根据 开发 的 系统 设计 一 个 购物 流程 ， 在 首页 或 者 是 其 他 功能 页 面 上 说 
明 购 物 、 结 算 、 售 后 服务 等 详细 的 过 程 。 这 也 要 与 企业 自己 的 物流 配送 相 结合 。 购 物流 程 
一 般 可 以 分 为 以 下 五 步 。 

采购 者 需要 先 在 网 上 进行 注册 后 才 可 以 采购 商品 ， 选 择 好 需要 的 商品 后 ， 单 击 需要 购买 
的 商品 ， 进 入 北京 京 美文 仪 购物 车 页 面 ， 该 页 和 面 有 以 下 几 个 购物 信息 如 商品 名 称 、 说 明 、 普 
通 注册 会 员 价 、 数 量 、 图 片 说 明 、 产 品 是 否 在 架 ， 如 果 不 需要 购买 其 他 商品 ， 可 以 单 击 “ 放 
入 购物 车 ”"， 网 上 购物 系统 自动 系 计 购买 的 商品 。 单 击 购物 车 上 的 【去 结算 】 按钮 ， 进 入 结 
算 中 心 页 面 。 如 果 还 需要 选 购 其 他 商品 ， 可 以 选择 该 页 面 中 的 【 继续 购物 】 按 钮 ， 系 统 将 跳 
回 购物 页 面 ， 在 选择 好 另外 的 商品 后 ， 再 单 击 【 放 入 购物 车 】 即 可 看 见 票 计 选 购 信 息 。 

第 二 步 : 输入 采购 者 信息 

当 此 次 选 购 结 束 后 ， 进 入 结算 中 心 页 面 ， 该 页 面 除了 有 所 选 购 的 商品 信息 外 ， 还 有 有 收 货 
人 、 送 货 地 址 、 联 系 电话 、 手 机 、Email、 附 言 ， 需 要 逐一 选择 或 者 填写 。 确 认 订单 信息 正 
确 后 ， 单 击 【 结算 】 按 钮 后 进入 订单 信息 最 终 页 面 。 

第 三 步 : 生成 订单 

订单 信息 最 终 页 面 将 显示 订货 人 信息 、 总 计 金 额 等 信息 ， 在 确认 无 误 后 ， 单 击 【 生成 订 
单 】 按 钮 ， 结 束 购物 。 

第 四 步 : 汇款 

第 五 步 : 送 货 


多 退 体 网 站 的 建 ， 


多 媒体 网 站 建设 是 目前 网 站 建设 中 的 技术 重点 和 
热点 ， 随 着 网 络 的 进一步 普及 ， 网 速 的 提高 ， 在线 电 
影 、 在 线 音 乐 、 在 线 课 堂 等 多 媒体 网 站 在 现在 的 网 站 
中 经 单 可 以 看 到 。 在 多 媒体 网 站 建设 中 使 用 的 较为 突 
出 的 惑 是 Flash，Flash 作为 网 页 制作 的 三 剑客 ， 突 
出 的 功能 残 是 实现 网 络 动画 ， 把 影像 和 声 音 在 网 页 二 
表达 出 来 。 本 章 束 重点 针对 这 类 网 站 举例 进行 介绍 。 
通过 学 习 ， 读 者 可 以 进一步 掌握 Flash 软件 的 使 用 ， 
为 客户 制作 出 具有 动感 的 动画 效果 。 


吕 北京 祖上 息 料 持 LT 
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[wT 
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8.1 多 始 体 网 站 开发 技术 


目前 多 媒体 网 站 的 开发 技术 是 比较 成 熟 的 ， 但 开发 的 方法 因 技术 选择 而 定 ， 应 用 于 网 站 
最 多 的 应 该 算是 Flash， 开 发 的 基本 程序 就 是 利用 Flash 开发 独立 的 多 媒体 课件 ， 然 后 用 
Dreamweaver 制作 网 页 ， 最 后 把 Flash 课件 车 入 网 页 中 即 可 完成 多 媒体 网 站 的 搭建 。 所 以 在 
业内 现在 也 有 统称 多 媒体 网 站 为 Flash 网 站 。Flash 作为 网 络 动画 软件 ， 其 应 用 越 来 越 广泛 ， 
越 来 越 深入 到 媒体 的 各 个 领域 。 可 以 看 到 的 是 ，Flash 的 用 途 和 功能 已 经 远 远 超越 了 普通 的 
动 男 制 作 软 件 的 标准 ， 而 正 朝 关 一 个 多 媒体 交互 平台 的 方 同 前 进 ， 它 已 经 成 为 了 网 络 多 媒体 
的 代名词 ， 或 者 说 它 就 是 业内 的 工业 标准 。 因 此 有 人 提出 Flash 的 真正 用 途 就 是 开发 多 媒体 
交互 网 站 。 这 一 说 法 是 否 能 被 接受 ， 还 有 竺 时间 与 实际 去 检验 ， 但 是 至 少 指出 Flash 网 站 的 
吸引 力 和 重要 性 。 对 于 兼职 设计 师 而 言 ， 掌 握 使 用 Flash 开发 网 站 的 扩 术 会 为 兼职 业务 钾 上 
添 花 ， 让 客户 更 加 认可 你 的 技术 水 平 。 


8.1.1 用 Flash 开发 网 站 


搭建 Flash 网 站 是 一 项 综合 的 应 用 ， 不 仪 仪 要 依靠 Flash， 同 时 还 需要 许多 其 他 网 络 技 术 
和 应 用 来 文 持 。F lash 动 男 需要 使 用 大 量 的 图 片 ， 但 是 Flash 本 身 的 图 像 处 理 功 能 并 不 是 十 分 
全 面 和 强大 ， 因 此 ， 在 制作 动画 前 期 ， 需 要 使 用 图 像 处 理工 具 对 图 瞩 素 材 进 行 处 理 ， 这 方面 
的 工具 常用 的 主要 有 Photoshop、Freehand、Core]DRAW 和 Firework 等 。 

与 此 类 似 ，Flash 动画 中 还 会 大 量 地 使 用 到 声音 文件 ， 而 Flash 对 声音 的 编辑 能 力也 是 有 
限 的 ， 因 此 还 需要 借助 外 部 工具 对 声音 文件 进行 处 理 、 编 辑 和 剪 辑 ， 这 方面 比较 音 用 的 工具 
是 Sonic Sound forge。 

在 Flash 网 站 中 ,利用 Flash 回 用 户 提供 动态 的 前 病 ， 但 是 在 后 疹 还 是 需要 使 用 到 数据 
库 或 者 类 似 的 数据 存储 和 管理 工具 。 作 为 一 个 由 动态 数据 库 驱 动 的 网 站 ， 分 为 前 端 和 后 靖 ， 
Flash 前 闯 需 要 和 动态 后 瘦 进 行 交 互 ， 收 发 服务 器 数据 ， 并 能 将 结果 动态 显示 。 动 态 后 站 包 
含 了 三 个 元 素 ， 即 服务 器 、 数 据 库 和 脚本 ， 而 Flash 一 般 是 通过 脚本 和 后 端 交互 的 。 比 较 常 
用 的 脚本 技术 主要 有 以 下 几 种 。 

1 ) ASP ( Active Server Page )， 是 一 套 由 微软 开发 的 服务 器 新 脚 本 环境 。ASP 内 含 于 IIS 
3.0 和 4.0 之 中 ， 通 过 ASP 可 以 结合 HTML 网 页 、ASP 指令 和 ActiveX 元 件 建立 动态 、 交 互 且 
高 效 的 Web 服务 器 应 用 程序 。 有 了 ASP 就 不 必 担 心 客户 的 浏览 器 是 否 能 运行 所 编写 的 代码 ， 
因为 所 有 的 程序 都 将 在 服务 帮 新 执行 ， 包 括 所 有 黄 在 兽 遂 HTML 中 的 脚本 程序 。 当 程序 执行 
完毕 后 ， 服 务 器 仅 将 执行 的 结果 返回 给 客户 浏览 器 ， 这 样 也 就 减轻 了 客户 靖 浏 览 器 的 负担 ， 
大 大 提高 了 交互 的 速度 。 

2 ) ColdFusion， 简 单 易 学 ， 真 正 实 现 了 跨 平 合 。ColdFusion MX 是 一 套 面 向 企业 的 应 用 服务 体 
系 ， 它 不 仅仅 是 一 种 语言 ， 也 是 基于 J2EE 基础 架构 的 有 自己 独特 开发 方式 的 产品 。 所 以 不 能 把 
ColdFusion MX 和 ASP、PHP 等 脚本 语言 划分 为 同一 种 类 型 的 语言 。ColdFusion MX 的 体系 包括 基于 
J2EE 架构 的 Application Server、 名 称 为 NE0 的 开放 式 编码 方式 、 开 发 企业 应 用 的 公用 接口 。 

3 ) PHP， 是 一 种 用 于 创建 动态 Web 页 面 的 服务 拳脚 本 语言 。 如 同 ASP 和 ColdFusion， 用 


户 可 以 滥 合 使 用 PHP 和 HTML 编写 Web 页 面 ， 当 访问 者 浏览 到 该 页 面 时 ， 服 务 端 会 首先 对 页 
面 中 的 PHP 命令 进行 处 理 ， 然 后 把 处 理 后 的 结果 连同 HTML 内 容 一 起 传送 到 访问 端的 浏览 
器 。 但 是 与 ASP 或 ColdFusion 不 同 ，PHP 是 一 种 源 代码 开放 程序 ， 拥 有 很 好 的 跨 平台 兼容 
性 。 用 户 可 以 在 Windows NT 系统 以 及 许多 版 本 的 UNIX 系统 上 运行 PHP， 而 且 可 以 将 PHP 作 
为 Apache 服务 器 的 内 置 模块 或 CGI 程序 运行 。 

4) CGI ( Common Gateway Interface )， 是 一 个 连接 外 部 应 用 程序 到 信息 服务 器 ( 比如 
HTTP 或 者 网 络 服 务 器 ) 的 标准 。 一 个 简单 的 HTML 文档 无 交互 后 全 程序 ， 它 是 静态 的 ， 也 就 
是 说 它 处 于 一 个 不 可 变 的 状态 ， 即 文本 文件 不 可 以 变化 。 相 反 地 ，CGI 程序 是 可 以 实时 执行 
的 ， 它 可 以 输出 动态 的 信息 。 

当 对 网 站 进行 总 体 设 计 或 最 后 对 Flash 网 站 进行 整合 的 时 候 ，Dreamweaver 是 一 个 非常 
不 错 和 十 分 弟 用 的 工具 。 


8.1.2 多 媒体 网 站 的 特点 


Flash 网 站 并 一 定 是 完全 的 一 个 Swf 动画 文件 ， 可 以 是 多 个 swf 文件 ， 也 可 以 是 swf 文件 
与 其 他 网 站 内 容 相 配合 ， 或 者 驶 僚 在 其 他 网 站 内 容 中 ， 只 要 网 站 的 大 部 分 交互 功能 是 通过 
Flash 实现 的 ， 那 么 这 个 网 站 就 可 以 称 为 Flash 网 站 。Flash 网 站 基本 以 图 形 和 动画 为 主 ， 所 
以 比较 适合 做 那些 文字 内 容 不 太 多 ， 以 平 团 、 动 画 效 果 为 主 的 应 用 。 

Flash 网 站 和 单个 Flash 作品 有 着 比较 显著 的 区 别 ， 这 些 区 别 主 要 体现 在 以 下 几 个 方面 。 

1 ) 文件 结构 不 同 。 单 个 Flash 作品 的 场景 、 动 国 过 程 及 内 容 都 在 一 个 文件 内 ， 而 全 
Flash 网 站 的 文件 由 若干 个 文件 构成 ， 并 且 可 以 根据 发 展 的 需要 继续 扩展 。 全 Flash 网 站 的 文 
件 动画 分 别 在 各 自 的 对 应 文件 内 ， 通 过 Action 的 导入 和 跳 转 控制 实现 动画 效果 ， 由 于 同时 
可 以 加 载 多 个 swf 文件 ， 它 们 将 重 亚 在 一 起 显示 在 屏幕 上 。 

2 ) 制作 思路 不 同 。 单 个 Flash 作品 的 制作 一 般 都 在 一 个 独立 的 文件 内 ， 计 划 好 动画 效果 
随时 间 线 的 变化 或 场景 的 交 蔡 变化 即 可 。 全 Flash 网 站 制作 则 更 需要 整体 的 把 握 ， 通 过 不 同 
文件 的 切换 和 控制 来 实现 全 Flash 网 站 的 动态 效果 ， 要 求 制作 者 有 了 明确 的 思路 和 良好 的 制作 
到 惯 。 

3 ) 文件 播放 流程 不 同 。 单 个 Flash 作品 通常 需要 将 所 有 的 文件 做 在 一 个 文件 内 ， 在 观看 
效果 时 必须 等 文件 基本 下 载 完 毕 才 开始 播放 。 但 全 Flash 网 站 是 通过 若干 个 文件 结合 在 一 
起 ， 在 时 间 流 上 更 符合 Flash 软件 产品 的 特性 。 文 件 可 以 做 的 比较 小 ， 通 过 陆续 载 入 其 他 文 
件 更 适合 Internet 的 传播 ， 这样 同 时 避免 了 访问 者 因 等 待 时 间 过 长 而 放弃 浏览 。 

总 的 来 说 ， 一 个 Flash 网 站 应 该 具备 以 下 的 特点 。 

] ) 动态 性 。 这 是 Flash 网 站 区 别 于 一 般 网 站 的 首要 特征 ， 因 为 一 般 的 网 站 也 同样 可 以 做 
到 交互 性 ， 也 同样 可 以 提供 多 媒体 ， 但 是 其 动态 效果 是 无 论 如 何 也 及 不 上 Flash 网 站 ， 这 也 
正 是 利用 Flash 开发 的 网 站 一 大 优势 所 在 。 

2 ) 交互 性 。 一 个 好 的 Flash 网 站 应 该 有 完善 而 友好 的 交互 功能 ， 这 里 的 交互 是 多 方面 、 
多 层次 的 ， 从 最 基本 的 图 片 和 文字 展示 到 大 规模 的 电子 商务 应 用 ， 应 该 这， 目前 网 站 提供 的 
交互 功能 ，Flash 网 站 都 可 以 也 完全 有 能 力 提供 。 

3 ) 多 巡 体 。Flash 本 身 就 是 一 个 优秀 的 多 媒体 软件 ， 支 持 多 种 网 络 巡 体 ， 因 此 Flash 网 
站 向 用 户 呈 现 的 必 将 是 多 种 多 样 的 媒体 信息 ， 网 站 内 容 将 不 再 局 限于 单调 的 文本 和 图 片 ， 媒 
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体 表达 方式 累加 灵活 多 样 ， 蝎 加 生动 活 痰 。 
8.1.3 ”掌握 基础 ActionScript 编程 


制作 Flash 播放 器 的 根本 就 在 于 编程 ， 如 果 想 制作 一 款 完 全 由 自己 创意 的 播放 器 ， 那 么 
Actionscript 语言 要 掌握 得 很 好 。 对 于 一 般 的 兼职 应 用 者 来 说， 想 制 作 一 个 小 播放 器 至 少 
要 有 一 定 的 Action 基础 ， 下 面 就 一 起 来 学 习 一 下 必须 掌握 的 基础 语言 。 

1. Action 基础 

Flash 的 动作 是 基于 其 本 身 的 语言 ActionScript， 相 对 于 同类 动画 制作 软件 的 语言 ， 如 
Director 的 Lingo 语言 ， ‘ 
Actionscript 时 为 有 直观， 掌握 起 ipt10&20 +|| 跑 月 色 Ww 守 回 沁 革 甘 亲 四 四 ” 同 f 人 并 @ 
来 也 比较 容易 。 es 

执行 菜单 栏 中 的 【 窗口 ] 一 “| 下 二 
【扩展 窗口 ] 一 【动作 】 命令 (或 
者 按 (F9) 键 ) 调 出 【动作 - 帧 】 
面板 ， 如 图 8-1 所 示 。 

【 动作 帧 】 和 面板 中 ， 左 边 是 动 
人 天 型 又 证 访 一 型 可 | 以 
展开 其 下 的 许多 具体 动作 ; 石 边 
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选 的 副 作 而 不 同 ， 因 此 不 需要 异 


ee 
得 太 多 ActionScript 语言 就 能 很 


万 便 地 使 用 它 。 
参数 窗口 中 的 参数 可 以 进行 复制 、 粘 贴 、 删 减 ， 操 作 方 法 是 选中 参数 然后 点 击 鼠 标 右键 
进行 选择 。 
.影片 控制 Action 
对 于 一 些 常 用 的 Flash 影片 控制 Action 要 熟练 应 用 ， 把 它 总 结 如 下 。 
@ goto 


语法 . gotoAndPlay(scene, frame) 

人 参数: scene 播放 头 将 转 到 场景 的 名 称 。frame 播放 头 将 转 到 帧 的 编号 或 标签 。 

使 用 说 明 : 动作 ; 将 播放 头 转 到 场景 中 指定 的 帧 并 从 该 帧 开始 播放 。 如 果 未 指定 场景 ， 
则 播放 头 将 转 到 当前 场景 中 的 指定 帧 。 

@ on 

语法 : on(mouseEvent) {statement(s);} 

参数 . statement(s) 是 指 发 生 mouseEvent 时 要 执行 的 指令 。 

mouseEvent 是 “事件 ”触发 器 。 当 发 生 此 事件 时 ， 执 行事 件 后 面 花 括号 中 的 语句 。 
可 为 mouseEvent 参数 指定 下 面 的 任何 值 : press 在 鼠标 指针 经 过 按钮 时 按 下 鼠标 
release 在 鼠标 指针 经 过 按钮 时 释放 鼠标 按钮 ; release0utside 当 鼠 标 指针 在 按钮 之 内 时 
按 下 按钮 后 ， 将 鼠标 指针 移 到 按钮 之 外 ， 此 时 释放 鼠标 ; rollout 鼠标 指针 移出 按钮 区 
域 ; rollover 鼠标 指针 靖 过 按钮 ; drag0ut 在 鼠标 指针 请 过 按钮 时 按 下 鼠标 ， 然 后 靖 出 此 


按钮 区 域 ; drag0ver 在 鼠标 指针 移 过 按钮 时 按 下 鼠标 ， 然 后 移出 此 按钮 ， 册 移 回 此 按 
钮 ; keypPress(key) 按 下 指定 的 key。 此 参数 的 key 部 分 可 使 用 Flash“ 键 盘 键 和 键 控 代码 
值 ” 中 所 列 的 任何 键 控 代码 进行 指定 ， 或 者 使 用 Key 对 象 的 属性 摘要 中 列 出 的 任何 键 间 
量 进行 指定 。 

使 用 说 明 : 事件 处 理 阵 数 ; 指定 触发 动作 的 鼠标 事件 或 按键 事件 。 

@ play 

语法 : playO) 

使 用 说 明 : 动作 ， 在 时 间 轴 中 辣 朋 移动 播放 关 。 

@ stop() 

语法 3 tOD 

使 用 说 明 : 动作 ; 停止 当前 正在 播放 的 影片。 此 动作 最 通 第 的 用 法 是 用 按钮 控制 影 
卢 勇 辑 。 

@ stopAllSounds 

语法 : stopA1]Sounds() 

使 用 说 明 : 动作 ; 在 不 停止 播放 头 的 情况 下 停止 影片 中 当前 正在 播放 的 所 有 声音 。 设 置 
到 流 的 声音 在 播放 头 移 过 它们 所 在 的 帆 时 将 恢复 播放 。 

3. 六 唤 妖 /网络 

该 部 分 的 Action 是 Flash CS5 用 来 与 影片 或 外 部 文件 进行 交互 操作 的 脚本 集合 。 

@ fsCommand 

语法 : fsCommand(”command”,“” parameters”) 

参数 : command、parameters 均 是 一 个 传递 给 宿主 应 用 程序 用 于 任何 用 途 的 字符 串 ， 或 
者 一 个 传递 给 Flash Player 的 值 。 

使 用 说 明 : 动作 ; 使 Flash 影片 能 够 与 Flash Player 或 承载 Flash Player 的 程序 ( 如 
Web 浏览 器 ) 进行 通讯 。 还 可 使 用 fsCommand 动作 将 消息 传递 给 Director， 或 者 传递 给 VB、 
VC++ 和 其 他 可 承载 ActiveX 控件 的 程序 。 

@ getURL 

语法 ，getURL ur , ”window , “variables” ) 

参数 : ur] 可 从 该 处 获取 文档 的 URL。 

window 一 个 可 选 参数 ， 指 定 文档 应 加 载 到 其 中 的 窗口 或 HTML 框 染 。 可 输入 特定 窗口 的 
名 称 ， 或 从 下 面 的 保留 目标 名 称 中 选择 : _self 指定 当 亲 窗口 中 的 当前 框架 _blank 指定 一 
个 新 窗口 ，_parent 指定 当前 框架 的 父 级 ，_top 指定 当前 窗口 中 的 顶级 框 染 ，variables 用 
于 发 送 变量 的 GET 或 POST 方法 。 如 果 没 有 变量 ， 则 省 上 略 此 参数 。GET 方法 将 变量 追加 到 URL 
的 末尾 ， 该 方法 用 于 发 送 少量 变量 。P0ST 方法 在 单独 的 HTTP 标 头 中 发 送 变 量 ， 该 方法 用 于 
发 送 长 的 变量 字符 串 。 

使 用 说 明 : 动作 ; 将 来 自 特 定 url 的 文档 加 载 到 帘 口 中 ， 或 将 变量 传递 到 位 于 所 定义 
URL 的 另 一 个 应 用 程序 。 知 要 测试 此 动作 ， 请 确保 要 加 载 的 文件 位 于 指定 的 位 置 。 若 要 使 用 
绝对 url， 则 需要 网 络 链接 。 

@ loadMovie 

语法 . loadMovie(” ury ,level/target[, variables]) 
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参数 : url] 要 加 载 的 SWF 文件 或 JPEG 文件 的 绝对 或 相对 url。 

target 指 同 目标 影片 筋 辑 的 路 径 。 目 标 影 乒 勇 辑 将 蔡 换 为 加 载 的 影 请 或 图 像 。 只 能 指定 
target 影片 剪辑 或 目标 影片 的 leve1 这 两 者 之 一 。 

Level 为 一 个 整数 ， 指 定 Flash Player 中 影片 将 争 加 载 到 的 级 别 。 在 将 影片 或 图 像 加 载 
到 级 别 时 ， 标 准 模式 下 “动作 ”面板 中 的 loadMovie 动作 将 切换 为 loadMovieNum。 在 专家 模 
式 下 ， 必 须 指定 loadMovieNum 或 从 “动作 ”工具 箱 中 选择 它 。 

variables 为 一 个 可 选 参 数 ， 指 定 发 送 变 量 所 使 用 的 HTTP 方法 。 该 参数 织 是 字符 串 GET 
或 POST。 

使 用 说 明 : 动作 ; 在 播放 原始 影片 的 同时 将 SWF 或 JPEG 文件 加 载 到 Flash Player 
中 。1oadMovie 动作 可 以 同时 显示 几 个 影片 ， 并 且 无 纳 加 载 另 一 个 HTML 文档 就 可 在 影 卢 
之 则 切换 。 

使 用 unloadMovie 动作 可 删除 使 用 loadMovie 动作 加 载 的 影片 。 

@ loadVariables 

语法 : loadVariables (“ur ,levelW target” [, variables]) 

参数 :ur] 变量 所 处 位 置 的 绝对 或 相对 url。 

leve1 指定 Flasn Player 中 接收 这 些 变 量 的 级 别 的 整数 。 参 数 具 体 用 法 同 loadmovie。 

target 指向 接收 所 加 载 变 量 的 影 厂 剪辑 的 目标 路 竹 。 

Variables 为 一 个 可 选 参 数 ， 指 定 发 送 变 量 所 使 用 的 HTTP 方法 。 

使 用 说 明 : 动作 ， 从 外 部 文件 ( 例如 文本 文件 ， 或 由 CGI 脚本 、ASP、PHP 脚本 生成 的 文 
本 ) 读 取 数据 ， 并 设置 Flash Player 级 别 或 目标 影片 筋 辑 中 变量 的 值 。 此 动作 还 可 用 于 使 用 
新 值 更 新 活动 影片 中 的 变量 。 

@ unloadMovie 

语法 ，unloadMovie[Numj(leve] target” ) 

参数: level 加 载 影片 的 级 别 ( _levelN )。 从 一 个 级 别 秃 载 影片 时 ， 在 标准 模式 下 ，“ 动 
作 ” 面 板 中 的 unloadMovie 动作 切换 为 unloadMovieNum。 在 专家 模式 下 ， 必 须 指定 
unloadMovieNum， 或 者 从 “动作 ”工具 箱 中 选择 它 。 

target 影 搬 勇 辑 的 目标 路 径 。 

使 用 说 明 : 动作 ; 从 Flash Player 中 删除 一 个 已 加 载 的 影片 或 影 户 勇 辑 。 

当然 其 他 的 相关 命令 还 有 很 多 ， 以 上 介绍 的 就 是 最 基础 和 最 章 用 的 命令 ， 对 于 一 般 的 兼 
只 人 员 来 说 有 这 些 基础 也 可 以 做 出 一 些 像样 的 作品 来 使 用 了 。 


8.2 ”网 站 整体 设计 


多 媒体 网 站 的 建设 主要 由 Flash 和 Dreamweaver 配合 开发 而 成 ， 应 用 Dreamweaver CS6 
开发 相应 的 网 页 ， 如 会 员 管理 系统 、 新 闻 发 布 系统 等 ， 在 这 里 都 不 再 介绍 ， 核 心 Flash 播放 
器 将 在 下 节 做 介绍 ， 本 小 节 对 中 国电 脑 教学 网 站 做 一 下 整体 的 设计 分 析 ， 完 成 的 首页 效果 如 
8=2 所 示 。 
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: 文件 区 ) 编辑 下 ) 查看 QD) 收藏 全 ) 工具 代 ) 帮助 出) 
地址 @) ~ 图 http: /7127.0.0.1 
p72 
中 国电 脑 教 子 网 服务 项 目 。 关于 我 们 。 建站 方案 。” 联系 我 们 。 客户 网 络 。 友情 链接 。 视点 论坛 篇 | 


China Computer Desien 





视频 学 习 登 陆风 EMBER 
平面 股 计 学 员 登 录入 口 . . 3DS Max 简 介 单 击 这 里 进入 学 习 界 面 


网 站 建设 学 员 登 录入 口 . . 30S Max 能 进行 二 次 建 醒 、 三 维 建 模 ， 生 成 动态 与 玫 坊 的 图 像 ， 三 维 图 形 能 被 katoc 各 所 解读 。 利 用 
ea Photoshop 可 将 30S Max 生成 的 静态 彩色 图 像 中 进行 各 种 图 你 处 理 。 所 30s Nax 生 成 的 动态 图 像 *. avi 立 件 能 被 
单 科 软 件 学 员 登 录 六 口 . . 各 类 多 媒体 制作 软件 所 使 用 ， 如 使 用 另外 的 压缩 处 理 软件 生成 *. mpg 广 件 ， 还 可 作为 制作 YCD 的 素材 。3DS 





, Max 的 功能 强大 ， 只 言 片 语 难以 概括 ， 一 般 来 说 ， 有 如 下 特性 : 

[网 上 注册 ] [密码 起 记 ] ( 1 ) 可 以 在 Windows 界 面 下 完成 多 重任 务 ， 全 部 操作 均 可 利用 鼠标 完成 ， 给 操作 者 带 来 极 大 的 方便 ， 从 
而 大 大 提高 30 动 画 的 操作 效率 。 

(2 ) 对 每 一 个 对 象 的 加 工具 有 直观 性 ， 即 面 对 影 像 实 际 操作 ， 可 以 使 人 充分 感受 到 一 体 化 工作 环境 的 


性 意 。 可 
NEWS 2 本 强大 的 编辑 给 图 功能 以 及 32 位 结构 的 外 各 速度 改进 了 以 往 无 法 输入 数值 的 缺点 ， 大 大 提高 了 动画 h 
Pe YY | 本。 
新 闻 中 出 (4 ) 超 立体 画面 、 出 色 的 泻 染 功能 ， 再 加 上 灵活 的 拖 电 性 ， 可 以 轻松 愉快 地 制作 出 各 种 创意 作品 。 = 
(5) 30 Studio Hax 增加 了 恢复 功能 , 即 在 工作 中 自动 记录 每 一 步 活动 ， 并 可 随时 回 到 性 意 一 个 步 
又 ， 使 创作 更 加 完美 。 - [于 
GUESTBOOK (6) 30 Studio Iax 支持 多 种 图 片 格式 ， 并 能 对 图 片 中 任意 对 象 进行 加 工 ， 新 的 Track Vi ew 对 话 框 可 
本 让 留言 以 主 便 地 控制 和 编辑 动画 顺序 。 
还 有 很 多 功能 不 一 一 列举 。 这 些 功能 在 早期 的 版 本 中 都 具有 ， 而 30 Studio llax 4.0 之 所 以 被 认为 接近 
完美 ， 主 要 是 它 具 有 更 先进 的 新 的 功能 
CONTACT 加 。 0DD 现 人 工作 室 了 作 方案 包括 完全 外 部 的 参照 系统 ， 示意 性 的 快速 查看 和 先进 的 30 Studio llax 外 
a | 
(2 ) 个 性 化 的 艺术 表现 : 可 以 设置 符合 个 人 习惯 的 3D Studio Wax 工 作 界 面 ， 主 工作 更 得 心 应 手 ， 更 强 
大 的 MAX SDK 开 发 功能 ， 可 创建 各 种 特效 的 外 挂 模块 ; 指令 批 处 理 功能 ， 大 大 加 快 工作 效率 。 
( 3 ) 更 快 更 好 的 泻 染 : 采用 更 好 的 泻 染 算法 ， 加 快 泻 染 速度 并 使 泻 染 过 程 更 容易 控制 
( 4 ) 通过 几何 学 选择 有 机 建 模 : 改进 的 MURBS ( 一 种 新 的 建 模 工 具 , 特别 适合 于 创建 由 复杂 曲线 构成 的 
曲面 功能 ,可 以 快速 外 建 具有 光滑 外 表 的 几何 仁 ， 而 且 对 NURBS 曲 面 的 修改 更 加 容易 。 
友情 链接 ( 5 游戏 开发 功能 : 更 加 方便 现代 三 维 游戏 的 场景 和 角色 建 模 。 
( 6 ) 先进 的 动画 功能 : 加 强 了 各 种 动画 控制 器 的 功能 ， 使 动画 控制 变 得 更 为 方便 和 容易 。 


但 


联系 咨询 





入 Internet 





是 图 8-2 网 站 的 首页 效果 


8.2.1 网 站 功能 结 


中 国电 脑 教 学 网 是 一 个 网 络 多 媒体 教学 网 站 ， 网 站 包含 了 平面 设计 、 网 站 建设 及 三 维 设 
计 三 部 分 的 基础 软件 操作 教学 恕 程 ， 所 有 多 媒体 课件 均 使 用 Photoshop + Flash 开发 而 成 。 
网 站 中 搭建 如 下 的 几 个 导航 菜单 ， 如 图 8-3 所 示 。 


服务 项 目 。 关于 我 们 ”建站 方案 联系 我 们 。 客户 网 络 





看 图 8-3 ”设计 的 导航 菜单 


网 站 中 多 媒体 教学 课件 可 以 通过 单 击 首 页 上 的 “ 单 击 这 里 进入 学 习 界 面 ”进入 3D MAX 
的 学 习 主 页 。 


8.2.2 ”页面 设计 规划 


从 上 面 的 导航 菜单 出 发 ， 在 本 地 站 点 上 建立 站 点 chap08。 制 作 后 的 网 站 建立 的 文件 夹 及 
文件 如 图 8-4 所 示 。 

网 站 静态 部 I 十 Photoshop 进行 人 设计， 静态 页 面 在 Dreamweaver (CS6 中 经 
排版 设计 实现 ， 下 面 分 别 介绍 一 下 各 页 面 的 功能 。 

(1 ) index.asp 页 面 是 这 Ce ， 输 入 网 站 的 域名 后 首先 打开 的 就 是 该 网 页 。 
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(_) 

每 马路 计算 机 ， 本 地 访 盘 (E:) ， 出 版 社 ， 机 械 工 业 出 版 社 》 
文件 (月 ”编辑 (E) ”查看 (V) 工具 (T) ”帮助 (H) 
组 织 ~ 图 预 鉴 ” ”打印 新 娃 文 件 夫 








从 


























请 收 项 去 名 称 
3d 2010/6/25 16:01 
庄 有 aboutus 2010/6/25 16:01 
DD contact 2010/6/25 16:01 
羡 计算 机 有 customer 2010/6/25 16:01 
站， 本 磁盘 (Cj -。 index 2010/6/25 16:01 
service 2010/6/25 16:01 
rr DD solutions 2010/6/25 16:01 
局 本 地 磺 盘 (中 司 3dmax 2005/9/23 16:09 ”ASp 文件 3 KB 
后 本 地 访 盘 (F) 别 3dmax 2005/9/24 13:27 ”Flash 文档 8,389 KB 
回 3dmax 2005/9/23 16:11 ”SWF 文件 210 KB 
售 网 络 骨 32 2005/9/24 9:10 Flash 文档 20 KB 
司 aboutus 2005/12/26 15:52 ”ASP 文件 6 KB 
司 addesign 2005/12/26 15:53 ”ASP 文件 10 KB 
一 banner 2005/9/23 16:10 ”Flash 文档 17 KB 
banner 2005/9/23 17:29 ”SWF 文件 1 KB 
本 | contact 2005/12/26 15:53 ASP 文件 7 KB 
司 customer 2005/12/26 15:53 ”ASp 文件 6 KB 
| index 2006/1/4 15:38 ASP 文件 8 KB 
本 links 2005/12/26 15:54 ”ASP 文件 5 KB 
| orderform 2005/12/26 15:51 ”ASP 文件 15 KB 
) RELINK 2005/7/2 10:07 ASP 文件 2 KB 
本 service 2005/12/26 15:54 ”ASP 文件 7 KB 
| | software 2005/12/26 15:54 ”ASP 文件 6 KB 
9 六 | tmmec 2nnmnsy/172772A 1S.SS ASD 立信 1N KR 
UI 拍 和 过 日 期 : 指定 拍 报 日 期 分 级 : 大 小 : 49.4 KB 作者 : 添加 作者 照相 机 制造 商 : 添加 文本 




















i | JPEG 图 像 标记 : 添加 标记 尺寸 : 802 x 652 标题: 添加 标题 备注 : 添加 备注 
| 


| 四 加 8-4 ”站 扣 规 划 文 件 
| (2 ) service.asp. 页 而 是 服务 项 目 页 和 面 ， 如 图 8-5 所 示 。 


| 北京 视点 设计 一 icrosoft Internet Explorer 辐 回 因 
: 文件 到 ) 编辑 人 E) 查看 名 收藏 入 工具 (I) 帮助 和 
:地 址 种) > 铬 http://127.0.0.1/service. asp 转 到 














北京 视点 设计 民 服务 项 目 。 关于 我 们 。 建站 方案 。 联系 我 们 
BEIJI SIGHT DESIGH 


SERYIGE 





网 站 捷 设 : 


网 站 建设 视点 视觉 设计 是 提供 设计 为 主体 服务 的 工作 室 ， 网 站 建设 是 除 软 件 开 发 外 的 最大 主题 ,可 以 说 : 
”我 们 是 专业 的 的 ?EB 设计 师 ,YEB 规 划 师 ,YEB 杀 统 构 架 师 和 YEB 建 造 者 。 我 们 是 企业 电子 商务 的 咨询 同 


富 储 六 总 ” 问 - 我 们 是 专业 的 平面 设计 师 ,是 为 了 你 的 企业 成 长 和 传 盖 而 出 卖 大 脑 的 年 轻 团 队 。 如 果 您 想 用 最 省 
”“““” ”多 、 最 快捷 的 方式 推广 自己 的 企业 和 产品 ,那么 ， 让 视点 为 您 服务 吧 * 


软件 开发 
-一 et 一 .网 站 CI 克 格 设计 服务 
a. 如 1 
_ 一 个 成 功 的 应 用 型 网 站 ， 全 业 门户 ， 集 团 公 司 网 站 必然 有 其 一 整套 设计 理念 与 CI 规则 。 网 页 并 不 
域名 注册 只 是 一 个 信息 的 载体 ， 它 还 震 要 承担 对 全 业 形 象 的 广告 效应 ， 而 针对 企业 WEB 的 CI 化 改版 服务 就 显得 
硅 常 的 重要 。 
虚拟 主机 
a 网 站 L060 的 设计 与 定位 ， L060 的 色彩 ,写意 ， 运 用 方法 的 定义 


网 站 推广 网 站 字体 用 法 与 规则 ， 标题， 广告 ， 正 立 排 列 的 方式 
症 和 网 站 首页 设计 及 礼 意 ， 相 关 醒 块 的 安排 与 帮 化 说 明 


四 二 . 网 站 个 性 化 克 格 设 计 上 服务 
在 线 订 单 


每 个 行业 均 有 其 独特 的 设计 克 格 ， 为 了 推广 一 个 品牌 ,需要 的 是 能 够 打动 人 心 的 个 性 化 役 计 ， 如 
何 运 用 YEB 中 的 技术 来 表达 出 独特 的 效果 是 我 们 能 为 密 提 供 的 服务 。 不 管 是 平面 的 设计 ， 还 是 多 媒体 技 
术 的 运用 ,才能 够 让 您 得 到 独一无二 的 效果 。 

全 业 个 性 片头 动画 的 设计 与 创意 

充满 个 性 而 大 胆 的 首页 设计 与 制作 


TPR EE A OA A EA Ph A TT A A TE 2 mp 一 Ey El FA A 


山 





黎 Internet 





由 图 8-5 服务 项 目 页 面 的 效果 
( 3 ) aboutus.asp 页 面 是 关于 我 们 栏目 页 面 ， 效 果 如 图 8-6 所 示 。 
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芭 北京 视点 设计 一 了 icrosoft Internet Explorer 
: 文件 灾 ) 编辑 付 ) 查看 (W) ”收藏 入) 工具 (I) 大助 加) 
地址】 Ehhttp.//127.0.0. 1/aboutus. asp 


Ss 





Fe 





北京 视点 设计 (BR 服务 项 目 。” 关于 我 们 ”建站 方案 。 联系 我 们 。 客户 网 络 。 “上 友情 链接 。 视点 论坛 | 
BEIJIH SIGHT DESIGH : 


-一 - 


欢迎 你 来 到 视点 设计 坊 ， 我 们 真诚 的 创意 服务 让 您 的 企业 如 虎 添 贾 。 
北京 视点 视觉 设计 坊 成 立 于 2002 年 ， 是 基于 计算 机 技术 开发 ， 全 面 提 供电 子 商务 咨询 与 解决 广 
ABOUT US 赛 的 全 业 之 一 拥有 与 互联 网 络 相关 的 多 项 产品 开发 和 制作 。 


pp 网 站 建设 、 域 名 空间 、 服 务 器 


时 宣传 多 媒体 光盘 、 平 面 设计 
历史 回顾 计算 机 网 络 教 学 


组 织 结构 我 们 致力 于 为 客户 提供 完整 的 网 站 建设 方案 ， 以 独到 的 设计 理 含 和 精工 细作 的 专业 精神 致力 于 网 
”站 建 设 , 为 客户 设计 出 精美 的 视 沉 创意 方案 ,通过 我 们 设计 与 策划 完美 的 设计 与 创意 ,增强 产品 的 竞 
系列 平台 ” 邹 力 。 希望 我 们 的 经 验 ,能 够 帮助 你 在 甘 茫 的 网 络 世界 脱颖而出 ,充分 享 和 互 联网 带 来 的 巨大 商机 . 
成 池 英 才 全 于 全 与 设计 公司 或 广告 公司 相 比 ,我 们 的 价格 会 更 吸引 你 

城 圳 英 7 : 


荣誉 认证 创意 求 新 、 服 务 为 实 ! 





Copyright 2004 — 2005 ww- designem. net 








多 Internet 
图 8-6 关于 我 们 页 和 面 效果 
( 4) solutions.asp 页 面 是 建站 方案 页 面 ， 设 计 的 效果 如 图 8-7 所 示 。 


EE P| - 了 icrosoft Internet Exzplorer 
: 文件 灾 ) 编辑 到) 查看 人 收藏 全) 工具 人 入) 帮助 加) 


地址) > ET a TREE ES: 





北京 视点 设计 (RR) 服务 项 目 。 关于 我 们 。 ”建站 方案 。 联系 我 们 。 客户 网 络 。 上 友情 链接 。 视点 论坛 
BEIJIN SIGHT DESIGH 


SOLUTIONS | 
企业 建站 之 道 
网 站 建设 


宣传 光盘 ( 一 ) 中 小 企业 网 站 解决 方案 概述 


软件 开发 中 小 企业 网 站 解决 方案 是 以 域名 注册 和 虚拟 主机 服务 为 主 , 应 企业 不 同 需求 配 以 主页 
a 制作 ，BBS, CHAT ,电子 商务 平台 等 系统 产 品 的 服务 。 其 特点 是 投资 比较 小 ,见效 快 ， 快 
历 设 1 速 有 效 地 笑 助 企业 近 出 电子 商务 第 一 步 * 


域名 注册 
虚拟 主机 
网 站 推广 
服务 流程 
在 线 订单 


( 二 ) 企业 门户 网 站 和 解决 方案 概述 
全 业 门户 网 站 的 定义 : 
使 用 域名 : 
TeE. 企业 名 称 . com 
wwr. 企业 名 称 . com- cn 


全 业 门 户 网 站 的 作用 : 
1. 发 名 侈 业 芒 息 - 发 布 芒 息 的 通道 





各 Internet 





8-7 ”建站 方案 页 面 的 设计 效果 
( 5 ) contact.asp 是 联系 我 们 页 面 ， 效 果 如 图 8-8 所 示 。 
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了 
入 北京 视点 设计 一 Hicrosoft Internet Explorer 
i 文件 下 ) 编辑 人 于 ) 查看 名 ”收藏 史 ) 工具 I) 帮助 山 ) 





地 址 种 ) > 狠 http: rr127.0.0.17eontaet. as 了 | 


北京 视点 设计 (RR) 服务 项 目 。 关于 我 们 ”建站 方案 联系 我 们 ” 客户 网 络 “友情 链接 
BEIJIN SIGHT DESIGH 


CONITACT 联系 我 们 : 
网 站 建设 
宣传 光盘 


软件 开发 业务 联系 咨询 人 匾 箱 : haiwangzi20068@163. com 


平面 设计 MSH Bessenger : haivangri20048@hotmail. com《 蝴 蛙 伴 芭 】 


域名 注册 唇 迅 99 在 钱 服 务 : 83560148( 嘲 蛙 伴 芭 ) 


如 果 黎 有 什么 须要 我 们 服务 的 话 请 护 以 上 方法 联系 我 们 ， 或 者 填写 在 钱 订 购 表单 ， 我 们 将 以 
虚拟 主机 ”最 快 时 间 与 您 职 得 联系 ! 


网 站 推广 
服务 流程 


在 线 订 单 








答 Internet 
大 图 8-8 联系 我 们 页 面 效 果 
其 他 的 页 面 风格 统一 ， 在 这 里 不 周一 一 个 绍 。 
(6 ) 核心 部 分 页 面 就 是 3dmax.asp 网 页 ， 在 Dreamweaver CS6 中 打开 的 效果 如 图 8-9 所 示 。 


DW 文件 (FP 编辑 (E) 查看 (V) 插入 (1 修改 (M) ”格式 (0) 命令 (C) ”站 点 (S$) 窗口 (W) 帮助 (HH) | 国 v 党 ” 曲 v | 器 v| 历 ” | OG cu 所 | 虽 攻 本 
3dmax.asp Xx E\ 出 版 社 \ 机 械 了 FE - = 于 责 TCR 








下 
下 





Adobe BrowserLab 





| 代码 | 拆 分 | 设计 ] | 实时 代码 | 后 光 | 实时 视图 | 检查 | @@. 作 . 标题 : 在 线 视频 学 习 系统 
LX 地 址 : file: AE | 出 版 社 / 机 械 工业 出 版 社 / dreamweaver/ 泊 盘 / source/ chap08 天 


| 




















| 名 =hapos 
A ROISGHY 固 

















蝇 久 站 点 - chap08 (F... 
3d 


aboutus 





由 














contact 








customer 








index 








Service 














solutions 
32.fla 

3dnmax. asp 
3dmax. fla 
3dmax. swf 








四 3 宽 必 ) 100 文件 严 ) /banner. swf 够 口 背景 颜色 (6) 忻 | 
高 00 50 回 原文 件 RR) 名 已 团 编辑 下 ) 


梧 循环 C) ”垂直 边 距 久 ) 品质 外 】 高 品质 ~ 对 章 内 [默认 值 ”vj 茵 信 目 | 
可 自动 播放 (nm 水平 边 距 上 ) 比例 GG) 默认 全 部 显示 ) ~ noaegl)| | [二 参数 |] 和 | 们 ”标本 : 在 线 枫 频 学 习 系统 [目下 


MN: (BB: [oy 




















国 图 8-9 3dmax.asp 网 页 排版 效果 
在 网 页 中 结构 非常 地 简单 ， 是 由 两 个 Flash 文件 移入 而 形成 的 ， 这 两 个 Flash 文件 需要 
进行 单独 的 设计 开发 。 
286 


8.3 多 媒体 课件 设计 


用 Flash 在 多 媒体 上 能 实现 哪些 神奇 的 功能 呢 ? 用 它 来 制作 一 个 接收 端的 播放 器 不 是 一 
件 很 难 的 事 ， 特 别 是 在 Flash 新 版 本 具有 支持 视频 的 功能 以 后 ， 大 家 都 知道 能 在 Flash CS5 
当中 进行 声音 的 导入 及 视频 的 剪辑 及 制作 ， 因 此 用 Flash 可 以 制作 网 络 视 频 文件 、MTV 等 。 
要 用 Flash 实现 这 些 功能 ， 除 了 掌握 Flash 的 基本 操作 之 外 ， 还 要 求 有 较 好 的 美工 基础 及 音 
乐 细 胞 。 下 面 就 一 起 来 制作 上 向 提 人 到 的 两 个 Flash 课件 。 


8.3.1 光谱 柱 效 果 


在 Windows Media Player 及 MP3 当中 ， 光 谱 分 析 器 的 效果 是 很 迷人 的 。 现 在 本 实例 就 教 “” 国 
大 家 如 何在 Flash CS5 中 实现 这 个 效果 。 ee 
学 会 后 把 它 放 在 多 媒体 视频 播放 器 中 能 | 
达到 演 染 的 效果 。 TO 人 
制作 内 步 取 如 下。 | 0 一 
(1 ) 启动 Flash CS5， 执 行 菜单 栏 中 〇 内 容 (O 
的 【文件 】 一 【新 建 ] 命令 ， 新 建立 一 O 打印 机 (P) 
个 Flash 文档 。 单 击 【 属性 】 面 板 中 的 背 果 颜色 :用 
【 大 小 】 属 性 后 面 的 【 编辑 】 按钮 ， 打 开 
【 文档 设置 】 对 话 框 ， 设 置 影片 宽 为 100 
像素 、 高 为 50 像素 ， 背 景 为 黑色 ， 播 放 
速度 帧 频 为 12 帧 频 ， 如 图 8-10 所 示 。 
(2 ) 执行 菜单 栏 中 的 【文件 】 一 【保存 】 命 令 ， 打开 【另存 为 】 对 话 框 ， 在 【文件 名 】 
文本 框 中 输入 banner， 将 其 保存 为 banner.fla， 如 图 8-11 所 示 。 








设 为 默认 值 (M) 





国 图 8-10 设置 影片 属性 


修改 日 期 

2011/3/9 1.. 
出 Corel User Files 2010/12/6 .. 
且 snaglt Catalog 2010/9/17 ... 
DD Visual Studio 2008 2011/3/22 ... 
是 全 等 2011/3/15 ... 
由 我 的 调 色 板 2011/3/9 1... 


文件 名 0: banner . 
保存 类 型 人 :| 了 ash CS5 文档 lb | 取消 | 








国名 8-11 保存 文件 
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钮 ， 选 中 该 矩形 ， 按 《Ctrl+C》 和 《Ctrl+V7 





( 3 ) 执行 菜单 栏 中 的 【插入 】 一 【新 
gr | 建 元 件 ] 命令 或 者 按 (CtritF8〉 组 合 键 打 
(nD [| 下 了] || 开 【创建 新 元 件 】 对 话 框 ， 新 建 一 个 名 为 
文件; 库 要 有 mc 的 【影片 剪辑 ] 如 图 8-12 所 示 。 


高 级 


国 图 8-12 新 建 影片 文件 


4 ) 单 击 【确定 】 按 钮 进入 mc 影片 剪辑 的 文档 编辑 窗口 ， 然 后 再 单 击 工具 箱 中 的 【 拢 
le, 品 按 钮 ， 用 算 形 工具 在 影片 mc 的 
场景 中 拖 绘 出 一 个 和 矩形， 删除 边线 。 在 【 属 
性 ] 面板 中 设置 W=6.0、H==3.0、X==-3.0、Y 

一 -3.0， 如 图 8-13 所 示 。 
) 单 击 工 具 箱 中 的 【选择 工具 】|% 按 





复制 这 个 算 形 ， 然 后 在 这 个 矩形 的 下 边 骨 复 





制 出 5 个 。 在 

【 属性 】 和 面板 中 

分 别 把 这 5 个 新 

增 窍 形 的 Y 坐标 国 图 8-13 ”设置 矩形 大 小 
改 成 -8 ，-13 ， 


-18，-23，-28， 其 他 参数 不 变 。 
) 把 这 6 个 矩形 的 颜色 由 上 至 下 设置 为 ， #FF3300， 
#FF6600 ，#FFCC00 ，#66CC33 ， 
#66FF33 ，#66FFCC ， 最 终 设置 | 宝 
而 图 8-14 设置 填充 色 效果 “如 图 8-14 所 示 。 屁 品 号 
(7 ) 单 击 国 B 品 到 主场 【二 二 
按 《Ctri+L》 组 合 键 打开 图 库 。 把 电影 勇 辑 mc 拖 近 到 | A 
场景 中 ， 共 拖 搜 8 次 ， 然 后 把 它们 排列 整齐 。 执 行 菜单 栏 | 一 一 
中 的 【 窗口 ] 一 【对齐 】 命令 或 者 执行 快捷 键 《Ctrl+K》 
调 出 【 对齐】 面板， 单 击 面板 上 的 【垂直 中 齐 】 按 钮 ， 如 
ES 15 a 把 这 些 音乐 彩 条 整齐 排列 。 司 图 8-15 对 齐 操作 
) 排 好 后 的 效果 如 图 8-16 所 示 。 








口 与 舞台 对 齐 








加 天 BN 本 BN BN BN HN 国 国 
加 天 BN EN 本 本 天 本 天 HN 本 天 
Ee EN EN 本 天 本 天 EN 本 天 本 天 
Bl BN BB BB 
量 网 8-16 复制 排列 彩 条 效果 


后 的 制作 效果 就 是 要 让 这 些 彩 条 在 黑色 框 里 随 看 首 乐 动 起 来 。 选 中 第 一 个 彩 条 ， 
在 【属性 】 面 板 中 ， 把 这 个 元 件 命 名 为 1]。 其 他 几 个 元 件 的 名 称 分 别 设 为 : 2、3、4、5、6、 
a Da 如 图 B17 HA 











国 图 8-17 在 属性 栏 中 给 元 件 分 别 命名 


选中 主场 景 中 的 第 2 帧 ， 按 下 《F6》 键 插入 一 个 关键 帆 。 接 着 单 击 第 1 巾 ， 近 
er 【 动作 - 帧 】 面板 ， 在 面板 中 输入 如 下 代码 。 


setProperty (/1", yscale, Number(random (90))+3 ); 
setProperty (/2", yscale, Number(random (90))+4); 
setProperty ("/3", yscale, Number(random (95))+6); 
setProperty ("/4", yscale, Number(random (100))+8); 
setProperty ("/5", yscale, Number(random (100))+8); 
setProperty (/6", yscale, Number(random (85))+6); 
setProperty (/7", yscale, Number(random (85))+4); 
setProperty ("/8", yscale, Number(random (80))+3); 


选中 第 2 帧 ， 写 下 代码 : gotoAndPlay (1);， 如 图 8-18 所 示 。 


EECTTESE 
全 局 函数 | gotoardP1ay(l) ; 人 
ActionScript 2.0 类 2 | 

全 局 尾 性 

运算 符 

语句 

编译 高 指令 


加 


四 


加 图 层 1: 杭 5 
日 畦 场景 1 
… 回 图 屋 1: 帧 1 








看 图 8-18 输入 代码 
( 12 ) 为 了 使 其 棋 放 频率 慢 点 ， 可 以 在 第 8 帧 加 入 相同 的 病 ， 完 成 的 效果 如 图 8-19 所 示 。 
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文件 (日 ”编辑 (E) ”视图 (V) 插入 (1) ”修改 (M) 文本 (T) ”命令 (C) ”控制 (0) ”调试 (D) 窗口 (W) ”帮助 (H) 基本 功能 v | [|D Oc 7 [oie 可 

















iner 医 
四 场景 1 图 咎 738% v 


























国 eeDoNv PSGQNSS 上 SO DO 天 ”国峰 



























































8-19 完成 的 时 间 轴 效果 


( 13 ) 执行 菜单 栏 中 的 【文件 】 一 【保存 】 命 令 将 制作 的 文件 保存 ， 再 执行 菜单 栏 中 的 
时 一 【 发布】 命令。 最 后 即 可 在 banner.fla 的 保存 路 径 下 生成 一 个 banner.swf 课件 ， 
将 其 时 入 3dmax.asp 页 面 就 可 以 使 用 。 


8.3.2 ”视频 点播 设计 


视频 挟 播 技术 的 实现 ee 喜与 重点 。 制 作 思 路 是 首先 用 
Photoshop 设计 播放 器 的 界 而 效果 ， 然 后 打开 Flash 导 界面 效果 作为 背景 图 上 ， 根 据 播 放 豆 
的 要 求 制作 播放 控制 条 ， 文 件 选 择 菜 单 ， | | 即 可 完成 视频 播放 器 的 设计 。 下 面 就 
按 各 部 分 的 功能 分 别 进行 介绍 。 

1. UI 寞 和 面 设 计 

UI 的 本 意 是 User Interface， 也 就 是 用 户 与 界面 的 关系 ， 它 包括 交互 设计 、 用 户 研 究 与 

界面 设计 三 个 部 分 。 在 这 里 就 是 指 Flash 播放 器 的 主 界 男 。 用 Photoshop CS5 设计 的 界面 如 
图 8-20 所 示 。 
设计 的 时 候 要 注意 如 下 几 点 
分 辨 率 要 与 计算 机 正音 情况 下 显示 辩 率 一 样 ， 为 72 点 ( dpi )。 

( 2 ) 大 小 要 根据 Flash 播放 器 的 大 小 及 功能 来 划分 ， 这 里 大 小 为 800X 650 像素 ， 功 能 分 
为 课件 显示 区 、 控 制 区 、 文 本 显示 区 及 音效 控制 区 4 个 功能 区 域 。 

3 ) 在 主体 设计 上 注意 颜色 的 统一 性 ， 由 于 显示 区 的 颜色 多 且 会 经 常 变 化 ， 建 议 播 放 器 
的 主 色 调 定 义 为 冷色 系 ， 如 黑色 、 瘟 色 等 


文件 ” 打印 (P) ~“ 电子 邮件 (E) ”刻录 (UJ) ” 打开 (0) > © 





国 图 8-20 设计 的 界面 


( 4) 保存 文档 的 格式 可 以 为 JPG 和 GIF 两 种 ， 这 两 种 格式 的 图 片 是 经 过 压缩 的 ， 在 Flash 
发 布 的 时 候 可 以 使 发 布 的 SWF 格式 文件 比较 小 ， 这 样 在 网 络 上 显示 的 时 候 可 以 比较 快 。 

2. 主体 界面 设计 

接 下 来 就 可 以 开始 在 Flash 中 进行 播放 局 的 设计 了 ， 主 体 设计 步骤 如 下 。 

(1 ) 局 动 Flasn CS5， 执 行 荣 单 栏 中 的 【文件 】 一 【新建 】 命 令 ， 新 建立 一 个 Flash 文档 ， 
单 击 【 属 性】 面板 中 的 【大 小 】 后 面 的 【编辑 】 按钮 ， 打开 【文档 设置 】 对 话 框 ， 设 置 影片 宽 
为 800 像素 ， 高 为 650 像素 ， 背 景 闫 色 为 白色 ,播放 速 度 帧 频 为 12 帧 频 ， 如 图 8-21 所 示 。 








尺寸 QDE59 禹 性 (宽度 )x [5 名 名 科 (高 度 ) 


| 标尺 单位 (RM: 仍 素 | 了 | 区 本 :| 癌 黑 认 介 ) 
@ 内 容 (C) 
© 打印 机 (P) 


背景 颜色 :| | 


国 图 8-21 设置 影片 属性 
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(0 


(2 ) 执行 菜单 栏 中 的 【文件 】 一 【保存 】 命 令 ， 打开 【另存 为 】 对 话 框 ， 在 【文件 名 】 
文本 框 中 输入 3dmax， 将 其 保存 为 3dmax.fla， 如 图 8-22 所 示 。 


”全 店 卢 回 - 
修改 日 期 





[et 2010/6/25 16:02 
2010/6/25 16:01 

| 2010/6/25 16:01 

pad 2010/6/25 16:01 

上 2010/6/25 16:01 
2010/6/25 16:01 

2011/3/29 17:32 





4 | Wl . 


文件 名 0: |3dnex 本 
保存 类 型 1); 





国 图 8-22 保存 文件 


(3 ) 单 击 【 保存】 按钮 ， 进 入 工作 场景 。 接 下 来 要 导入 UI 图 片 文件 。 执 行 菜单 栏 中 的 【 文 
件 ] 一 【导入 】 一 【导入 到 舞台 ] 命令 (快捷 键 为 《Ctrlt+R》)， 打 开 【 导 入】 对 话 框 。 在 打开 
的 【 导入】 对 话 框 中 选择 所 需要 的 图 片 文 件 ， 这 里 需要 导入 UI.jpg 图 片 文件 ( 光盘 中 的 路 
径 为 Sourse/chap08/UI.jpg )， 如 图 8-23 所 示 。 








国 导入 一 至 一 


< 四 六 中 reamweaver h 光 盟 kk source kk chapD8 k -| 二 | 六 芝 chap08 D| 


下 
err 下 


名 称 修改 日 期 





出 3d 2011/3/22 15:30 ”文件 去 
上 aboutus 2011/3/22 15:30 文件 去 
出 contact 2011/3/22 15:30 ”文件 去 
山 customer 2011/3/22 15:30 ”文件 去 
山 index 2011/3/22 15:30 ”文件 去 


| service 2011/3/22 15:30 文件 去 

且 solutions 2011/3/22 15:30 文件 去 

回 3dmax 2005/9/23 16:11 SWF 文件 
回 | banner 2005/9/23 17:29 ”SWF 文件 
| 国 uI 2005/9/24 8:26 ”JPEG 图像 


“| 


本 











羡 件 名 (N): UI 





是 图 8-23 设置 【 导入】 对 话 框 
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(4) 选中 文件 后 ， 单 击 【 打 开 】 按 钮 ， 图 片 文 件 即 可 以 导入 ， 如 图 8-24 所 示 。 





Fi。 文人 (了 ”编辑 (E) 视图 (V) 插入 (1) 修改 (M) ”文本 (T) 命令 (C) ”控制 (0) ”调式 (D) 窗口 (W) ”帮助 (H) | | 天 能 v|[ 万 |]Ocw 加 虽 医 梧 








国 ss0DS$N PSGQNSScANSOD7 了 DID0C 秋 二 园 怖 


Ww/ 














Pe 


国 图 8-24 导入 图 片 文件 效果 
EE 
(5 ) 用 鼠标 双击 【 时 间 轴 】 上 面 的 、 ( 6 ) 单 击 【 时间 轴 】 上 的 【新 建 图 
[ 图 层 1 】， 将 其 重 命名 为 back， 如 图 8-25“ 层 】 回 按钮 ， 在 时 间 轴 上 新 建立 【 图 层 
所 示 。 这 样 操作 的 目的 是 因为 后 面 要 制作 全 2 ])， 同 样 修改 图 层 名 称 为 “选课 按钮 "， 如 
的 图 层 很 多 ， 命 名 后 方便 编辑 与 修改 。 8 一 26 所 示 。 
时 间 负 | 动画 编辑 器 | 


合生 口 5 nm 5 2 


Ln 

















名 局 名 中 甸 号 咖 [ 4 324.0fps 是 口交 中 别 号 了 [1 24%fps 99s 
国 图 8-25 修改 图 层 名 称 国 图 8-26 ”新 建立 图 层 
(7 ) 在 该 图 层 上 是 放置 选择 课程 的 一 级 按钮 ， 它 主要 是 由 simple_bt 按钮 网 套 而 成 的 
choice 按钮 。 首 先 执 行 菜单 栏 中 的 【插入 】 一 
【 新 建 元 件 】 命 令 或 者 按 《Ctrl+F8》 组 合 键 打开 ES 
【 创建 新 元 件 】 对 话 框 ， 新 建 一 个 名 为 simple_bt wale Ee 
的 【按钮 ])， 如 图 8-27 所 示 。 文件 夫 : 诺 根 目录 
(8 ) 单 击 【 确定】 按钮 ， 进 入 按钮 文档 编辑 | 部 ， : 
人 窗口， 此 时 的 时 间 轴 有 【 弹 起 人 【指针 经 过 小 
【 按 下 【点击 】4 个 帧 ， 如 图 8-28 所 示 。 a 


OEE 
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回 忽 钱 器 13mips DDs 


8-28 ”建立 的 按钮 时 间 轴 


4 个 帧 代表 的 意思 分 别 如 下 。 

【 弹 起 】， 按 钮 在 没 用 鼠标 总 击 时 显示 的 平面 效果 。 

【 指针 经 过 】， 是 指 鼠 标 经 过 按钮 时 显示 的 平面 
效果 。 

【 按 下 】 是 指 鼠 标 按 下 左 键 按 钮 时 显示 的 平面 
效果 。 

【 点 击 ]， 是 指 在 该 按钮 上 单 击 鼠 标 左 键 时 显示 
的 平面 效果 。 

通过 这 4 帧 不 同 的 平面 变化 ， 可 以 让 按钮 在 不 
同 的 动作 情况 下 产生 动态 的 效果 。 

( 9 ) 单 击 工具 箱 中 的 【和 矩形 工具 】 品 按钮， 单 
击 【 填充 色 】 按 钮 & 忌 ， 在 展开 的 级 连 选 择 面 板 中 国 图 8-29 选择 填充 色 
输入 色 值 为 #66CCFF， 如 图 8-29 所 示 。 

( 10 ) 在 文档 窗口 中 绘制 一 个 矩形， 在 【 属性】 面板 中 设置 【 宽 ] 为 100,【 高 】 为 20， 
其 他 保持 默认 值 ， 如 图 8-30 所 示 。 


大 和 CCFF 





窗 ; 100.,00 





国 图 8-30 绘制 矩形 


( 11 ) 用 鼠标 单 击 【 指针 经 过 】 帧 ， 在 这 里 要 设置 一 个 变化 的 影片 ， 这 样 当 鼠标 经 过 的 
时 候 就 会 有 动画 产生 。 执 行 菜单 栏 中 的 【插入 】 
一 【新 建 元 件 ] 命令 或 者 按 (CtrltF8〉 组 合 键 # 亲 [gow5 
开 【 创建 新 元 件 】 对 话 框 ， 新 建 一 个 名 为 shan 的 | sa [EBD 














影片 剪辑 ]， 如 图 8-31 所 示 。 人 
( 12 ) 单 击 【 确 定 ] 按钮 ， 进 入 shan 影片 前 【一 


辑 文档 编辑 窗口 。 在 该 窗口 中 再 付 入 一 个 影片 草 国 图 8-31 建立 新 影片 剪辑 


辑 anl1， 在 里 面 单 击 工具 箱 中 的 【和 矩形 工具 】 品 按钮， 绘制 一 个 白色 灰 边 的 矩形 ， 大 小 与 前 
面 制 作 的 按钮 大 小 一 样 ， 并 把 anl 影 卢 勇 辑 拖 放 到 shan 影片 剪辑 的 第 1 帧 上 ， 如 图 8-32 
所 未 。 








Fi 文件 (日 ” 编 辑 (E) 视图 (V) 插入 (1) 修改 (M) 文本 (T) 命令 (C) ”控制 (0) ”调试 (D) 窗口 (W) 帮助 (H) | | 上床 能 vY|[P 1Gce ， Ee 区 时 





Pl 曾 和 忽 ， 377% ” 库 








少 国 eeDNv PSNNSASSSASO-De OO 天 二 国 | 二 





+ 





国 图 8-32 绘制 的 矩形 效果 


OOO 


(14 ) 设置 后 单 击 【 时间 轴 】 上 的 第 2 
帧 ， 按 《F6 》 键 插 入 关键 帧 ， 并 在 【 属 
性 】 面 板 中 设置 其 【颜色 】 值 的 色调 为 黄 
色 ， 色 值 【RGB 】 为 255、204、0， 如 图 
8 一 34 所 示 。 


( 13 ) 单 击 【 时 间 轴 】 上 的 医 人 按 
钮 ， 返 回 shan 影片 剪辑 的 文档 编辑 窗口 ， 
用 鼠标 选择 场景 中 的 anl 影片 剪辑 ， 在 
[ 属性 】 面 板 中 设置 其 【颜色 】 值 的 色调 
为 白色 ， 如 图 8-33 所 示 。 


污 例 名 种 > 
影片 剪辑 


洋 浆 名 称 > 
影片 剪辑 


ke 





实例 : anl 实例 : anl 


< 








CD 


国 图 8-33 设置 颜色 值 国 图 8-34 设置 第 2 帧 的 变化 颜色 
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”打开 【动作 - 帧 ] 面板 ， 在 里 面 输入 跳 播 动作 
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(30 
































(| 所 示 。 


( 15 ) 同样 地 在 第 11 帧 播 入 关键 帧 ， 设 置 【 颜色 】 的 色调 值 为 红色 ， 色 值 【RGB 为 


255、102、0。 在 第 21 帧 插入 关键 帧 ， 设 置 
【颜色 】 的 色调 为 黄色 ， 色 值 【R6B ] 为 255、 时 间 轴 a 


204、0， 并 分 别 在 第 2~11 帧 ， 第 12~ 21 帧 之 


间 【 创建 补 间 动 男 】 完成 的 时 间 轴 如 图 8-35 





( 16 ) 用 鼠标 选择 第 21 帧 ， 然 后 按 〈《F9》 可 已 音 和 | 而 而 [I 术 册 不 WES 攻 


各 图 8-35 创建 补 间 动 男 后 的 时 间 轴 
命令 ， 如 图 8-36 所 示 。 


虫 骨 和 旨 扣 在 鲍 员 音节 革 四 四 机 faH 断 并 @ 
全 局 图 数 a gotondPlay (2) ; 2 
ActionScript 2.0 类 

全 局 尾 性 

运算 符 

语句 


四 


日 国 当前 选择 -| 
“… 回 图 层 1: 帧 21 喇 册 < 国 
日 备 场 最 1 | 加 图 层 1: 21 压 
“ 磋 soundck csoundd -| | 第 1 行 ( 共 1 行 ) ,第 16 列 








四 图 8-36 输入 中 播 命令 

(17 ) 设计 完成 后 单 击 时 间 轴 上 的 轩辕 按钮 ， 返 回 simple_bt 按钮 的 文档 编辑 窗口 ， 
分 别 在 【 按 下 【点 击 】 帧 处 按 下 《F6〉 键 插入 关键 帧 ， 完 成 这 个 按钮 的 设计 。 

(18) 在 【 库 】 面 板 中 双击 打开 choice 按钮 ， 在 图 层 1 上 【点击 】 帧 处 按 (F5〉 键 插入 
相同 帧 ， 并 把 simple_bt 按钮 拖 放 到 文档 窗口 。 单 击 【 新 建 图 层 】 按钮 ， 在 时 间 轴 上 新 建立 
【 图 层 2 ])， 在 【 弹 起 】 帧 处 输入 文字 “选择 课程 ”， 完 成 后 如 图 8-37 所 示 。 

在 simple_bt 按钮 上 还 要 输入 动作 操作 命令 如 下 . 


on (release) { 


_Toot.cad menu 00.gotoAndStop(2); 


} 
意思 是 单 击 这 个 按钮 的 时 候 cad_menu_00 会 跳 播 到 第 2 帧 。cad_menu_00 这 个 影片 剪 
辑 将 在 后 面 进行 介绍 。 
( 19 ) 单 击 图 EE 相同 到 主场 景 ， 将 制作 的 choice 按钮 拖 放 到 “选课 按钮 ”图 层 上 ， 并 设 
置 到 播放 器 的 右 下 角 处 ， 如 图 8-38 所 示 。 
(20 ) 按 (F9》 键 ， 打开 【动作 - 帧 】 面 板 ， 输 入 如 下 的 代码 : 
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大 图 8-37 完成 的 choice 按钮 


Fi 文件 (月 ”编辑 (E) 视图 (V) 插入 (D 修改 (M) 文本 (T) ”命令 (C) ”控制 (0) ” 调 坛 (D) 窗口 (W) 帮助 (H) | | 款 能 "|[P |]Ocw ， Ge 区 强 





国 ss0DS$Nv 记 全 NSS 人 ASDADm VCEF7 国 | 











大 图 8-38 设置 “ 选 恕 按钮 ”位 置 
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stopQ); 
stopAllSounds(); 


该 代码 的 意思 是 确认 Flash 文件 执行 时 停止 在 该 帧 ， 并 停止 所 有 声音 。 以 上 完成 了 “ 选 
课 按钮 ”图 层 的 设计 。 
党 | (21) 单 击 【 时 间 轴 】 上 的 【 新 建 图 层 ] 祝 按 钮 ， 在 时 间 轴 上 新 建立 【图 层 3 】 修改 医 
二 | 层 名 称 为 menu_00。 该 图 层 是 放置 单 击 “ 选 择 
“) 课程 ”按钮 后 打开 的 级 连 菜单 ， 所 以 该 图 层 的 
/” 设计 思路 应 该 是 在 第 1 帧 上 没有 任何 东西 的 ， | 鳃 WEseeem 
在 第 2 帧 放置 2 级 菜单 。 执 行 菜单 栏 中 的 【 捅 [| 
入 】 一 【新 建 元 件 】 命令 或 者 按 (CtrltF8》 | 
组 合 键 打开 【 创建 新 元 件 】 对 话 框 ， 新 建 一 个 并 


ee 





是 4 三 痢 zz | 只 一 
ee cad_menu_00 的 【 影 厂 衣 辑 ])， 如 图 8-39 国 图 8-39 建立 新 的 影片 前 辑 
/J\o 


( 22 ) 单 击 【 确定 按钮 进入 文档 编辑 窗口 ， 在 该 文档 里 面 建立 两 个 图 层 ， 图 层 1 上 的 
第 2 帧 排放 7 个 simple_bt 按钮 ， 在 图 层 2 的 各 帧 上 分 别 加 入 stop0 命 令 ， 并 在 第 2 帧 输入 
说 明文 字 ， 完 成 的 场景 如 图 8-40 所 示 。 


= 文件 (编辑 (E) ”视图 (V) 插入 (1 修改 (M) 文本 (T) 命令 (C) ”控制 (0) ” 育 试 (D) 窗口 (W) ”者 助 (H) | | 基本 功能 ” | [局 Gcsuive > 2 














[el 场 县 1 [加 cd menu_ 00 











,图 8s0DSNN 卢 人 NS 全 NSSD7 了 De 人 0 名 员工 国 


了 
Asw 


* 





力图 8-40 制作 的 2 级 菜单 场景 效果 


( 23 ) 该 菜单 上 的 按钮 功能 是 在 单 击 的 时 候 能 再 展开 第 3 级 菜单 ， 所 以 还 要 在 每 个 
simple_bt 按钮 上 加 入 跳 播 命令 ， 这 里 每 个 按钮 的 命令 格式 是 一 样 的 ， 就 是 指向 的 菜单 名 不 
一 样 。 举 例 “ 认 识 3DMAX” 按 钮 上 的 命令 如 下 : 
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on (Telease) { 
_root.flash menu.gotoAndStop(2); 


， 
意思 是 在 单 击 的 时 候 F jash_menu 中 播 到 第 a 由 ， 输入 的 场景 如 图 8—41 所 示 。 


/ 
| 


0 
大 


所 


虫 内 和 赎 如 要 鲜 交 划 着 革 内 四 明代 上 新 起 人 @ 交 
on (lrelease) { > 
2 人 Ff lash_menu. gotohndStop (2). 村  / 





ActionScript 2.0 类 
全 局 层 性 











日 国 当前 选择 < 
i; -此 simple_bt 国 

日 站 场 最 1 怒 simple bt 注 
第 3 行 ! 共 3 行 )， 第 2 列 





由 图 8-41 输入 的 号 播 命令 


( 24 ) 在 主场 景 中 建立 menu_01 图 层 ， 该 图 层 放 置 3 级 菜单 ， 第 1 帧 是 空白 帧 ， 第 2 巾 
至 第 8 帆 分 别 放置 不 同 的 菜单 按钮 ， 如 图 8-42 所 示 。 








FL。 文件 (日 ”编辑 (E) ”视图 (V) 插入 (1) 修改 (M) ”文本 (T 命令 (C) 控制 (0) ”调试 (D) 窗口 (W) ”帮助 (H) | | 于 加 能 rvY|[ 万 | Ocw 后 虽 攻 本 
四 人 


mm 2 
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久 in_controller 
fun011 
drag_bt 
counter 
controller 
(9 choice 

入 cd_menu 
9 bt 
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an 





国 eeDyNv 人 NSNSSwANSD7De ne 其 二 图 | 
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国 图 8-42 制作 的 3 级 菜单 
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具体 的 制作 方法 与 2 级 菜单 相同 ， 这 里 主要 分 析 一 下 最 后 在 simple_bt 加 入 的 命令 ， 
代码 如 下 : 


on (rollOver) { 
if( root.yulan){ 
_root.content.unload Movie(""); 
_root.content.load Movie("3d/fla/1.swf");} 
/鼠标 经 过 的 时 候 印 载 content 影片 剪辑 里 面 的 内 容 ， 同 时 装载 路 径 3d/fla/1.swf 文件 


on (release) { 





_Toot.yulan=false; 
_root.content.unloadMovie(""); 
_root.content.load Movie("3d/Flash/1.swf'"); 
_root.Flash menu.gotoAndStop(1); 
_root.cad menu 00.g0toAndStop(1); 
HM/ 单 击 妥 标 的 时 候 节 载 content 影片 叉 辑 里 面 的 内 容 ， 同 时 浅 载 路 答 3d/Flash/1.swf 文件 ，2 级 和 3 

级 菜单 都 跳 到 第 1 帧 变 得 不 可 见 。 

上 面 的 这 段 程序 是 这 个 级 菜单 控制 的 主要 命令 ， 其 中 两 个 路 径 下 的 文件 就 是 总 件 的 绝对 
路 径 ， 所 有 制作 的 课件 可 以 放置 在 相应 的 文件 来 下 ， 注 意 名 称 一 定 要 一 样 。 到 这 一 步骤 ， 播 
放 缉 的 菜单 主体 控制 已 经 实现 。 

3. 播放 进度 控制 

播放 避 的 功能 必须 有 播放 的 进度 控制 功能 ， 就 像 一 个 正规 的 播放 右 一 样 ， 它 要 有 “ 播 
放 、 暂停 、“ 快 进 、 快 退 “停止 ”及 可 自由 播放 的 进度 条 功能 。 在 Flash 中 使 用 
ActionSctipt 命令 也 可 以 实现 这 样 的 控制 。 制 作 步 又 如 下 。 

(1 ) 按 上 面 的 制作 步骤 ， 在 时 间 轴 上 单 击 【时间 轴 】 上 的 【新 建 图 层 】 按钮 ， 在 时 间 轴 
上 新 建立 【图 层 1 】)， 修 改 图 层 名 称 为 tiao。 执 行 菜单 栏 中 的 【插入 】 一 【新 建 元 件 命令 
或 者 按 (Ctrlt+F8》 组 合 键 打 开 【 创建 新 元 件 】 对 话 框 ， 新 建 一 个 名 为 controller 的 【 影 
剪辑 进入 影片 的 文档 编辑 窗口 ， 双 击 【 图 层 1 】 改 名 为 “背景 "， 然 后 再 单 击 工 具 箱 中 的 
【 线条 工具 】 7 按钮 ， 在 整个 播放 器 的 背景 控制 条 上 男 上 一 个 背景 效果 ， 如 图 8-43 所 示 。 


图 8-43 ”绘制 背景 控制 条 效果 


(2 ) 在 时 间 轴 上 单 击 【 时 间 轴 】 上 的 【新 建 图 层 】 按 钮 ， 在 时 间 轴 上 新 建立 【 图 层 
2 ]， 修 改 图 层 名 称 为 “按钮 *"”， 在 上 面 放 置 “ 播 放 ”"、“ 快 退 "、“ 暂 停 ” 及 “ 快 进 ” 4 个 按 
钮 。 执 行 菜单 栏 中 的 【插入 】 一 【新 建 元 件 】 命 令 或 者 按 《Ctrl+F8》 组合 键 打开 【 创建 新 
元 件 】 对 话 框 ， 新 建 一 个 名 为 play 的 【按钮 )， 在 场景 中 设计 的 播放 按钮 样式 如 图 8-44 所 
示 。 在 播放 按钮 上 加 的 命令 如 下 : 


on (press) { root.content.play(); 


} 


用 同样 的 方法 设计 的 另外 3 个 按钮 如 图 8-45~ 图 8-47 所 示 。 
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加 图 8-45 设计 的 kuaijing_r 快 进 按钮 
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襄 卉 上 衣 天 网 改 凡 有 稚 





Fl | 寺前 v| 四 ] COcue -可 长 到 
文件 (日 ”编辑 (E) 视图 (V) 插入 (1 修改 (M) 文本 (T) 命令 (C) 控制 (D) ”调试 (D) 窗口 (W) ”帮助 (H) 
[admae 国 
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文件 (日 ”编辑 (E) 视图 (V) 插入 (有 修改 (M) 文本 (T) 命令 (C) ”控制 (0) 
和 三 场 明 1 we kuaiing | 


心 泗 卫 国 
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Y 区 in_controller 
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二 图 8-47 设计 的 kuaijing_1 快 退 按钮 
在 stop 按钮 上 加 的 命令 如 下 : 
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on (press) { 


_ oot.content.stop(); 


} 
在 kuaijing_r 按钮 上 加 的 命令 如 下 . 


on (press) { 


_root.content.nextFrame(); 


} 
在 kuaijing_1 按 钮 上 加 的 命令 如 下 . 


on (press) { 


_root.content.prevFrame(); 


} 

( 3 ) 将 制作 的 4 个 按钮 放 到 “播放 进度 ”图 层 上 ， 返 回 controller 的 【影片 剪辑 】 文档 
编辑 窗口 ， 在 时 间 轴 上 单 击 【 时 间 轴 】 上 的 【新 建 图 层 】 按钮 ， 在 时 间 轴 上 新 建立 【 图 层 
3 】， 修 改 图 层 名 称 为 “播放 进度 "， 该 图 层 用 来 放置 可 以 自由 拖 动 的 播放 进度 条 drag_bt 影 
片 剪 辑 。 

(4) 在 drag_bt 影片 和 剪辑 图 层 1 上 建立 一 个 按钮 此 ， 按 钮 的 样式 如 图 8-48 所 示 。 





但 攻 Oc ， 匡 加 局 可 
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国 图 8-48 设计 的 按钮 bt 


(5 ) 单 击 时 间 轴 上 的 回国 可 习 按钮， 返回 drag_bt 文档 编辑 窗口 ， 用 鼠标 选择 图 层 1 上 
面 的 bt 按钮， 按 《F9》 打开 【动作 -按钮 】 面 板 ， 输 入 如 下 的 命令 : 
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el on (press) { 

zz startDrag("", true, -337.8, -14, -56.8, -14); 
_root.content. stop(); 

3 _ parent.counter.stop(); 

山 

Sy on (release) { 

stopDrag(); 

drag x = Math.floor((( parent.drag bt. x+557.8)/S501)* root.content. totalframes); 

a= parent.drag bt. x; 

trace("drag bt x="+a); 

trace("drag x="+drag X); 

_root.content.gotoAndPlay(drag x); 

_parent.counter.play(); 


上 面 的 这 上段 程序 就 是 实现 控制 按钮 bt 可 以 自由 拖 动 ， 并 让 播放 的 文件 与 之 同步 的 命令 。 

( 6 ) 在 时 间 轴 上 单 击 【 时 间 轴 】 上 的 【新 建 图 层 】 按 钮 ， 在 时 间 轴 上 新 建立 【图 层 
2 】 绘制 一 个 色 块 ， 这 样 操作 的 目的 是 让 这 个 可 拖 动 的 bt 按钮 可 见 。 完 成 的 drag_bt 场景 
如 图 8-49 所 示 。 








Fl | 于 办" 万 Ce 7 世 虽 攻 呈 
文件 (F) ”编辑 (E) ”视图 (V) ” 播 入 D 修改 (M) 文本 (T) 命令 (C) ”控制 (0) ”调试 (D) 窗口 (W) ”帮助 (H) 








ej 场景 1 [对 controller 因 drag ht 


回 | 
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v in_controller 
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controller 
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国 图 8-49 设计 完成 的 drag_bt 场景 效果 


(7) 返回 controller 的 【影片 剪辑 】 文 档 编辑 窗口 ， 在 时 间 轴 上 单 击 【 时间 轴 】 上 的 
【 新 建 图 层 按钮 ， 在 时 间 轴 上 新 建立 【 图 层 4 】 修改 图 层 名 称 为 counter， 该 图 层 用 来 放 
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置 一 个 只 有 两 帧 代码 的 空 影片 剪辑 counter。 进 入 该 影片 剪辑 的 场景 如 图 8-50 所 示 。 


Fl | 于" | 万 Cue ;EE 而 剖 
文件 ( ”编辑 (E) ”视图 (V) 插入 (有 修改 (M) 文本 (T) ”命令 ( 〇 控制 (O) ”调试 (D) 窗口 (W) ”帮助 (H) 
- EETETTI < %. 1 


















v [EY in_controller 
曲 stop 
0 paly 


曲 kuaijing_r 


0 kuaijing_| 
u} fun011 
drag_bt 
counter 
controller 
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国 图 8-50 ”影片 剪辑 的 场景 


currentframe= root.content. currentframe-1; 
totalframes= root.content. totalframes; 


_parent.drag bt. x=S01*Number((currentframe/totalframes))-357.8 
在 第 二 帧 的 命令 如 下 : 


gotoAndPlay(1] ); 
i=1+1]; 


We 
注 
吝 
习 
红 
下 
柚 





trace(1); 
这 两 帆 的 命令 是 把 上 面 制 作 的 bt 按钮 命令 进行 再 次 处 理 ， 实 现 鼠 标 拖 动 的 时 候 按 钮 能 
跟随 鼠标 的 运动 功能 。 到 这 里 就 完成 主场 景 1 图 层 tiao 的 设计 。 
4. 音乐 控制 
在 Flash 中 插入 声音 文件 的 时 候 ， 必 须知 道 影响 声音 质量 和 文件 大 小 的 几 个 因素 ， 其 
中 比较 重要 的 是 采样 挛 和 分 辨 率 。 采 样 率 是 指 在 数字 录音 时 ， 单 位 时 间 内 对 音频 信号 进行 
及 样 的 次 数 ， 它 以 赫兹 (Hz) 或 干 赫 兹 (KHz) 为 单位 。 通 党 来 说 ， 采 样 庚 越 高 ， 单 位 时 间 内 对 
声音 采样 的 次 数 就 越 多 ， 这 样 音质 也 就 会 越 好 。MP3 音乐 的 采样 率 一 般 是 44.1KHz， 即 每 秒 
要 对 声音 进行 44100 次 分 析 ， 记 录 每 两 次 分 析 之 间 的 差别 。 采 样 率 越 高 ， 获 得 的 声音 信息 
也 越 完整 。 如 果 要 对 频率 范围 在 20 ~ 20000Hz 之 间 的 声音 信息 进行 正确 的 采样 ， 声 音源 必 
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须 按 不 低 于 40000Hz 的 采样 频率 进行 来 样 应 用 。 降 低 声 音 文件 的 采 桩 率 ， 文 件 的 体 多 会 减 
小 ， 但 声音 的 失真 现象 也 就 会 越 明 显 。 因 此 ， 米 样 率 水 及 如 何 协调 声音 文件 的 体积 与 音质 
的 比例 关系 ， 表 8-1 就 列 出 了 各 种 音频 采样 率 及 其 质量 ， 在 应 用 中 可 以 作为 一 个 参考 的 
对 象 。 

表 8-1 音频 采样 率 


22.05KHz FM 收音 质量 短 的 高 质量 音乐 片断 
32KHz 接近 CD 质量 数字 摄像 机 








44.1KHz CD 质量 高 保 真 声音 和 音乐 
48KHz 演播 质量 数字 媒体 上 的 声音 或 音乐 


分 辨 率 也 被 称 做 声音 的 浓度， 用 于 摘 述 每 个 音频 采 桩 氮 的 比特 数 。 它 表示 以 2 为 底数 的 
指数 ， 例 如 8 位 声音 采样 就 表示 2 的 8 次 方 ， 即 256 级 。 位 分 状 率 越 大 ， 描 述 声 音 的 信息 也 就 
越 多 ， 声 音 就 更 清晰 丰富 ， 但 所 握 体 积 就 越 大 。 位 分 辨 率 的 高 供 是 可 以 转换 的 ， 这 种 转换 可 以 
通过 硬件 或 软件 来 实现 ， 表 8-2 也 列 出 了 几 种 音频 的 位 分 辨 率 及 其 质量 。 





表 8-2 音频 分 辨 率 及 质量 














4 位 长 的 音乐 片断 ， 高 质量 的 话音 ， 声 音效 果 
8 位 短 的 高 质量 音乐 片断 
EE 


16 位 CD 质量 高 保 真 声音 和 音乐 


掌握 了 上 面 的 基础 知识 ， 下 面 就 开始 实现 声音 的 控制 与 播放 ， 具 体 的 步骤 如 下 。 
( 1 ) 接 上 一 步 操作 , 在 Flash CS5 主场 景 1 中 ， 单 击 【 时 间 轴 】 上 的 【新建 图 层 】 按 
钮 ， 在 时 间 轴 上 新 建立 【图 层 5 】， 修 改 图 层 名 称 为 Sound。 
( 2 ) 执行 菜单 栏 中 的 【 插入】 一 【新 建 元 件 】 命 令 或 者 按 《Ctrl+F8)》 快捷 键 插入 一 个 
影片 剪辑 ， 命 名 为 soundck， 如 图 8-51 所 示 。 
(3) 在 soundck 文档 编辑 窗口 中 只 有 一 个 图 层 1， 在 图 层 1 上 分 别 建立 3 个 关键 帧 。 在 
第 ] 个 关键 帧 上 不 放置 任何 东西 ， 输 入 如 下 的 命令 : 
var snd=new Sound0:/ 定 义 新 声音 
snd.attachSound("bgsound");// 绑 定 声 首 bgsound 
snd.start(0,99999);// 播 放 99999 次 


( 4) 在 第 2 帧 处 按 《F6》 插入 关键 帧 ， 然 后 执行 菜单 栏 中 的 【文件 】 一 【导入 一 【 导 
入 到 库 ] 命令 ， 打开 【 导入】 面板 ， 选择 要 导入 的 背景 音乐 fun011.mp3 文件 ， 这 样 
fun011.mp3 就 导入 到 库 中 可 以 调用 。 在 库 中 选择 fun011.mp3 文件 ， 单 击 鼠 标 右键 ， 在 弹出 的 
菜单 中 选择 【 属性 】 命 令 ， 打 开 【 链接 属性 】 对 话 框 ， 在 【 标识 符 】 文 本 框 中 输入 被 上 面 调用 
的 标识 bgsound， 如 图 8-52 所 示 。 





链接 




















名称 N):[soundk | pp 导出 (9 
类 型 (T): 消 标识 符 四 :了 ET 
文件 夹 : 康 根 目录 有 
高 级 ， 
看 图 8-51 新 建 影 由 图 8-52 设置 【链接 属性 】 对 语 杠 


(5 ) 单 击 【 确定】 按钮， 选择 第 2 帆 先 加 入 由 停止 命令 stop0;， 然 后 再 单 击 菜单 栏 中 的 
【 窗口 】 一 【公用 库 】 一 【按钮 】 命 令 ， 调 出 【 库 -Buttons.fla】 面 板 ， 选 择 Circle Buttons 
文件 夹 中 的 play 和 stop 按钮， 如 图 8-53 所 示 。 


上 书 arcade button - oranm' 
忆 arcade button - red 
上 书 arcade button - 
应 Circle Buttons 
局 circle button - 
忆 circle button - 
避 circle button -七 
局 circle button 
皮 Circle with arrow 





国 图 8-53 打开 共享 图 库 并 选择 相应 的 按钮 


(6 ) 在 第 2 巾 中 加 入 stop 按钮 ， 在 第 3 帧 搬入 一 个 关键 帧 ， 并 把 play 按钮 拖 到 场景 
中 ， 并 分 别 加 入 文字 说 明 ， 完 成 的 第 2 帧 及 第 3 帧 场景 如 图 8-54 所 示 。 


© 





加 图 8-54 拉 入 的 第 ?2 巾 及 第 3 怖 场景 效果 
(7 ) 分别 在 第 1 帆 和 第 2 巾 中 输入 停止 Stop( ): 命 令 。 
(8) 用 鼠标 分 别 单 击 play、stop 两 个 按钮 ， 输 入 相应 的 声音 控制 命令 。 


on(release){ 
snd.start(0,99999); 
gotoAndStop(2); 
_root.Flash2.gotoAndPlay(1); 
} /表示 按 下 该 按钮 的 时 候 声音 开始 播放 ， 并 且 显 示 停 止 音乐 的 按钮 
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nd stop 按钮 上 的 命令 


on(release){ 
jn snd.stop("bgsound"); 
: gotoAndStop(3); 
中 _root.Flash2.gotoAndStop(12); 
/表示 按 下 该 按钮 时 声音 俘 止 ， 并 且 显 示 开 始 播放 音乐 的 按钮 

这 样 就 完成 了 声音 的 控制 。 
f 斋 要 说 明 的 凡 就 是 这 个 命令 对 T content 
播放 器 中 所 有 有 的 播放 声音 都 是 适 影片 多 加 
用 的 ， 包 括 再 调 入 的 课件 声音 。 实 网 : loader 

(9 ) 对 于 整个 视频 点 播 妖 还 
需要 建立 一 个 空 的 影片 筋 辑 文件 
并 命名 为 content， 如 图 8-55 所 
示 。 这 是 因为 前 面 设 计 的 菜单 中 
单 击 相 应 的 吉 件 ， 都 是 通过 
content 这 个 影片 更 辑 来 实现 播放 




















| 与 停止 的 。 画图 8-55 建立 空 影片 剪辑 content 
( 10 ) 最 后 完成 的 主场 景 如 图 8-56 所 示 。 
[EI | 站 9 月 "| 历 |] Ocw 加 
文件 (日 ”编辑 (E) ”视图 (V) 插入 (1 修改 (M) 文本 (T) 命令 (C) 控制 (D) ”调试 (D) 窗口 (W) ”帮助 (H) 











soundck 
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力图 8-56 ”完成 的 时 间 轴 
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多 媒体 网 站 中 还 有 大 量 的 课件 需要 开发 ， 开 发 的 技术 比较 简单 ， 通 过 录音 及 相应 的 动画 
制作 就 可 以 实现 ， 基 本 上 不 用 再 进行 复杂 的 编程 设计 ， 读 者 可 以 根据 开发 网 站 的 需要 自行 开 
发 相应 的 课件 并 命名 ， 最 后 对 开发 的 Flash 播放 器 进行 调用 。 


8.4 后 期 完善 工作 


Flash 多 媒体 网 站 的 制作 是 一 件 比 较 烦 天 的 事情 ， 在 制作 时 需要 十 分 细心 和 耐心。 制作 
过 程 当中 也 难免 会 有 很 多 没有 考虑 周到 或 者 足 凋 的 地 方 ， 需 要 在 网 站 制作 后 期 进行 完善 。 

只 要 仔细 考虑 ， 就 会 发 现 其 实 值得 进行 后 期 完善 和 优化 的 地 方 还 是 很 多 的 。 

比如 图 形 方面 ， 前 期 手绘 不 够 精细 的 地 方 ， 可 以 在 后 期 不 断 地 加 以 修改 ， 由 于 使 用 了 图 
形 元 件 ， 所 以 只 修改 元 件 就 可 以 了 ， 而 动画 总 体 不 用 修改 。 

又 比如 动作 脚本 方 阜 ， 可 以 从 程序 设计 相 软 件 工程 的 角度 进行 优化 ， 对 各 个 功能 模块 和 
函数 要 多 做 测试 ， 特 别 是 非法 测试 。 一 些 没 有 必要 的 代码 或 者 影响 运行 速度 的 代码 要 及 时 清 
除 。 尽 量 使 代码 执行 效 紊 高、 执行 速度 快 ， 对 寞 瘦 情 况 要 能 进行 一 定 的 处 理 。 

总 的 来 况 ， 对 已 经 完成 的 Flash 文件 进行 优化 ， 主 要 包括 以 下 几 个 方面 的 内 容 。 

(1 ) 简化 绘制 元 素 或 从 外 部 导入 图 形 

在 【修改 】 一 【形状 ] 菜单 中 包 合 了 【平滑 儿 【 伸 直 【优化 】 等 指令 , 【平滑 】 和 和 
【 伸 直 】 指 令 可 以 自动 使 选中 的 直线 及 曲线 变 得 平滑 并 保持 平 直 ， 而 如 果 硕 望 尽 可 能 多 地 保 
持原 始 线条 的 形状 ， 便 可 以 使 用 【 优化】 命令 。 采 用 上 述 命令 的 目的 是 删除 那些 不 需要 的 点 
和 线路 信息 ， 从 而 减少 保存 的 数据 量 ， 只 保留 最 少 的 显示 该 内 容 的 数据 信息 。 由 于 屏 基 的 分 
畴 率 一 般 要 比 打 印 分 辩 率 瞳 低 ， 因 此 一 些 比较 币 小 的 细 厂 有 时 可 以 省 略 挥 而 且 还 不 会 影响 整 
体 显示 效果 。 

(2 ) 用 元 件 代 蔡 组 

元 件 只 被 保存 在 Flash 文档 中 一 次 ， 但 可 以 被 反复 使 用 多 次 ， 而 且 只 会 对 文件 字 忆 有 
极 小 的 影响 。 组 与 元 件 不 同 ， 每 次 使 用 组 时 都 会 被 保存 到 Flash 文档 内 一 次 ， 从 而 导致 文 
件 字 二 不 断 增 大 。 因 此 如 果 有 一 组 元 素 需 要 在 Flash 中 使 用 三 次 ， 就 会 在 Flash 电影 文档 内 
重复 保存 三 次 相同 的 内 容 。 如 果 使 用 元 件 而 不 使 用 组 ， 只 需 保 存 一 次 元 件 ， 然 后 添加 三 个 


比较 小 的 参照 信息 便 可 达到 目的 。 由 此 可 见 ， 使 用 元 件 来 代 荐 组 可 以 非常 有 效 地 减 小 文档 
字 妆 数 。 


( 3 ) 预 棚 载 元 件 

如 上 文 所 述 ，Flash 播放 豆 必 须 把 一 个 元 件 全 部 下 载 完 毕 才 能 将 某 帧 内 容 显 示 在 屏幕 
上 。 可 以 通过 生成 的 报告 及 实际 播放 时 的 检查 来 对 Flash 文件 进行 研究 ， 寻 找 在 播放 过 程 中 
哪个 阶段 因 某 一 帧 需要 调 取 过 多 数据 而 导致 播放 效果 受到 影响 。 如 有 果 Flash 文件 由 一 些 比较 
小 的 元 件 组 成 ， 那 么 ， 可 以 预先 将 这 些 元 件 北 载 至 一 个 层 的 内 容 下 并 使 其 保持 隐 沽 ， 这 种 方 
法 可 以 提前 将 一 些 元 件 疙 载 至 客户 亲 但 不 让 客户 看 到 它们 ， 当 后 来 需要 使 用 条 元 件 时 ， 可 以 
不 用 等 竺 便 将 其 显示 出 来 ， 从 而 大 大 加 快 了 显示 速度 。 

甚至 可 以 强行 使 Flash 播放 器 预先 装载 Flash 文件 中 所 有 的 元 件 ， 把 它们 放 至 第 1 帧 一 
个 层 的 内 容 下 并 保持 隐藏 。 如 果 采 取 这 种 方法 ，Flash 文件 在 播放 第 1 帧 时 需要 花费 较 长 时 
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间 ， 因 为 它 需 要 把 所 有 元 件 下 载 至 客户 亲 。 也 许 这 种 方法 在 多 数 情况 下 并 不 实用 ， 但 有 时 也 
很 必要 ， 例 如 在 播放 一 些 不 允许 停顿 的 声音 信息 时 ， 最 好 还 是 首先 将 它们 全 部 下 载 完 毕 以 便 
实现 更 好 的 欣 黄 效 果 。 

( 4 ) 不 要 同时 使 用 大 量 占用 CPU 的 特效 

Flash 制作 出 的 基于 矢量 的 动画 与 光栅 动 男 系统 的 位 图 图 形 有 所 不 同 ， 前 者 需要 鼎 用 一 
定 CPU 资产 来 对 矢量 数据 进行 计算 ， 然 后 才能 将 图 形 显示 在 屏幕 上 。 在 帧 动画 中 对 元 件 进行 
变形 、 对 颜色 进行 变换 、 在 帧 之 间 变 换 较 大 显示 内 容 、 使 用 渐变 填充 色 块 等 都 对 CPU 占用 较 
多 ， 与 装载 Flash 文件 普通 内 容 相 比 ， 它 们 需要 CPU 进行 更 复杂 的 运算 。 当 大 量 过 多 占用 
CPU 资源 的 Flash 显示 特效 同时 出 现时 ， 播 放 效 果 可 能 会 出 现 停顿 。 

( 5 ) 通过 压缩 减 小 位 图 占用 空间 

Flash 支持 两 种 压缩 位 图 的 方式 ， 即 JPEG 和 Lossless( 无 损 压 缩 )。JPEG 压缩 方式 是 系统 
默认 的 压缩 导入 Flash 的 位 图 图 片 的 方式 ，Flash 播放 器 的 导出 对 话 框 中 可 以 调整 JPEG 的 压 
缩 程 度 ， 压 缩 值 从 1 至 100，1 表示 最 大 压缩 比 和 最 低 男 质 ，100 表示 最 小 压缩 比 和 最 高 画 
质 。 由 于 JPEG 为 有 损 压缩 格式 ， 因 此 最 好 调整 JPEG 的 压缩 比 来 找到 压缩 比 和 男 质 的 最 佳 平 
衡 点 。 位 图 图 片 也 可 以 采用 无 损 压 缩 方式 来 在 保持 图 片 质量 的 情况 下 实现 一 定 的 压缩 ， 不 过 
无 损 压缩 不 能 达到 JPEG 压缩 方式 那样 大 的 压缩 比 。 

( 6 ) 避免 使 用 动画 位 图 图 片 

位 图 图 片 不 像 矢 量 图 形 那 样 可 以 非 单方 便 地 在 屏幕 上 变化 或 旋转 ， 矢 量 图 形 在 屏幕 上 可 
以 随意 变换 位 置 而 不 会 对 文件 大 小 有 了 明显 影响 ， 但 每 当 位 图 图 片 在 Flash 文件 的 屏幕 上 改变 
位 置 来 实现 动画 效果 时 ， 系 统 都 要 调用 一 个 新 的 位 图 图 片 。 

( 7 ) 缩短 声音 长 度 

Flash 无 法 达到 Shockwave Streaming Audio 音频 播放 器 实现 的 压缩 效果 ， 因 此 在 Flash 
文件 中 播放 较 长 的 声音 信息 是 不 明智 的 。 为 了 减 小 声音 文件 子 世 但 同时 确保 声音 信息 足够 
长 ， 制 作者 可 以 采用 缩短 声 首 长 度 但 循环 播放 该 段 声 首 的 方法 ， 因 为 这 样 只 需 下 载 很 少 的 声 
首 信 息 而 可 以 重复 使 用 这 段 内 容 。 

( 8 ) 避免 使 用 多 种 字体 

在 制作 Flash 文件 时 控制 文件 字 广 是 一 个 非常 重要 的 考虑 因素 ， 限 制 Flash 文件 中 出 现 
的 字体 数目 则 对 于 减 小 文件 字 节 有 很 大 的 作用 。 使 用 某 个 子 体 中 的 任何 字符 都 将 会 在 文件 中 
存储 一 些 相 关 信 息 ， 这 些 信 息 可 以 被 多 次 重复 调用 。 但 如 果 使 用 较 多 字体 ， 字 人 符 在 每 个 字体 
下 显示 效果 的 信息 都 要 被 保存 下 来 ， 从 而 增 大 了 文件 子 世 数 。 
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